Impress your clients with modern, stunning, fully customizable website templates • Ad
Tailwind CSS doesn’t provide an utility class for animation duration as it does for transitions, for which you have a class like duration-<number>.
However, with arbitrary variants, you can still override the animation duration using a simple class directly in HTML.
Set Custom Animation Durations in Tailwind CSS via HTML
Let’s say you want to use the ping animation that Tailwind CSS provides by default, but you want to change its duration.
You can do that by adding the arbitrary variant [animation-duration:_.5s] next to the animation class. And you can change the value to whatever you want.
For example, if I want my ping animation’s duration to be 1.5 seconds, I’ll add this:
<span class="animate-ping [animation-duration:_1.5s]"></span>
That’s it! Quick, easy, and inside your HTML.
That’s a Wrap
I hope this post has helped you out.
If you're interested in my web design services or templates, want to collaborate, or just have something to say, feel free to shoot me a message.