htmlcsscss-animationstailwind-css

How to stop TailwindCSS animation after a set time

I was wondering if there is a way to stop an animation in TailwindCSS after a set time, for example, stop the bouncing after 10 seconds. I've tried everything, but I can't find a way.

I've tried using duration-75, but the animation won't stop.

<script src="https://cdn.tailwindcss.com"></script>

<div class="text-center p-10">
  <button class="px-8 py-2 mx-auto bg-green-300 animate-bounce duration-75">
    How can the bounce animation be stopped after X repetitions under Xs?
  </button>
</div>

Solution

  • There's no built-in way to do this. You can create your own class to override the iterations.

    .temporary-bounce {
  -webkit-animation-iteration-count: 10;
  animation-iteration-count: 10;
}

    For reference, the CSS for bounce is here.

    https://tailwindcss.com/docs/animation#class-reference