CODEWITHSUNDEEP
javascripthtmlcssanimation
Angelica Parra
Angelica Parra

Reputation: 1

Stop an infinite css animation on click?

I have this animation, and I want it to repeat infinite, but I want it to stop and never start again when someone do click on it, Is there a way?Thank you!

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

Upvotes: 0

Views: 212

Answers (2)

Angelica Parra
Angelica Parra

Reputation: 1

Thanks I did this:

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

Upvotes: 0

doğukan
doğukan

Reputation: 27431

You can use this

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

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

Upvotes: 2

Related Questions