javascript - 单击时停止无限的 css 动画？

Question

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

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;
}

Answer 1

你可以用这个

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

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