我有这个动画,我希望它无限重复,但我希望它停止并且当有人点击它时再也不会开始,有什么办法吗?谢谢!
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;
}
最佳答案
你可以用这个
const yourButton = document.querySelector("#yourButton");
const bounceIn = document.querySelector(".bounceIn");
yourButton.addEventListener("click",function(){
bounceIn.style.animationPlayState = "paused";
});
关于javascript - 单击时停止无限的 css 动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54844932/