Search code examples
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

stop bouncing after 10 seconds

I have tried everything but I cannot find a way

<div class="text-center p-10">
  <button class="px-8 py-2 mx-auto text-white bg-blue-700 rounded transition duration-75 ease-in-out hover:bg-green-400 transform hover:-translate-y-1 animate-bounce">Hello</button>
</div>

I have tried the duration-75 but the animation wont stop

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