how to stop tailwindcss animation after a set time

Question

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

On

Answer 1

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

Byram

Might make more sense to name class "temporary-animate" or "temporary-count" as it can be applied to other "animate-" events – Showery

Answer 2

I was trying to build a short bounce animation, which bounces a small error message on screen when a user fails to log in. This message only needs to bounce a few seconds to get the user's attention, without annoying the user. As you can see from the link in @Matt's answer, tailwind uses the following css code for the bounce class:

animation: bounce 1s infinite;

Where bounce refers to the @keyframes configuration, 1s refers to the duration of a single iteration and infinite refers to the total number of iterations, going on forever in this case. This means we somehow have to adjust that last part.

The neat thing about tailwind is that you can extend the configuration in tailwind.config.js and make your own classes. Here, I am borrowing the keyframes from the existing bounce class to make my own shorter version out of it:

  // tailwind.config.js
  
  module.exports = {
    theme: {
      extend: {
        animation: {
          // Bounces 5 times 1s equals 5 seconds
          'bounce-short': 'bounce 1s ease-in-out 5'
        }
      }
    }
  }

Easy as that, without polluting other files with custom css code. If needed you can even extend the configuration with custom keyframes, meaning that you have total control of the intermediate steps of the animation. The official documentation demonstrates how to achieve this.

Snapback