点击时停止无限的css动画？答案

【问题标题】：Stop an infinite css animation on click?点击时停止无限的css动画？
【发布时间】：2019-02-24 09:14:30
【问题描述】：

我有这个动画，我希望它无限重复，但是当有人点击它时我希望它停止并且不再开始，有什么办法吗？谢谢！

HTML：

<div class="container">

  <a class="carousel-control-prev mr-5" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>

  <div class="clickme bounceIn d-flex flex-column">click me</div>

  <a class="carousel-control-next bounceIn" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

CSS：

.bounceIn {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    animation-delay: 5s;
    -webkit-animation-iteration-count: infinite;
}

【问题讨论】：

只需单击一下即可删除此类？
animation 属性的浏览器前缀在 CSS 中不是必需的

标签： javascript html css animation

【解决方案1】：

你可以用这个

const yourButton = document.querySelector("#yourButton");
const bounceIn = document.querySelector(".bounceIn");

yourButton.addEventListener("click",function(){
  bounceIn.style.animationPlayState = "paused";
});

【讨论】：

【解决方案2】：

谢谢我这样做了：

$(".stop-animation").click(function(){
  $(".bounceIn").css("animation", "none");
});
$(".stop-animation").click(function(){
  $(".clickme").css("animation", "none");
});

【讨论】：