Tailwind Animation Generator

Pick, customize, and preview Tailwind CSS animations visually.

Home
/
Tailwind
/
Animation Generator

Animation

Built-in Animation

Duration

Delay

Easing

Preview

tailwind.config.js (animation + keyframes)

HTML Usage

How to Use

Choose a built-in animation (Spin, Ping, Pulse, Bounce) or create Custom Keyframes.
Adjust duration, delay, and easing to fine-tune the animation.
Preview the animation live in the preview box.
Copy the generated tailwind.config.js code and HTML usage.

Frequently Asked Questions

How do I add the animation to my project?

Copy the generated tailwind.config.js code into your Tailwind config's theme.extend.animation and theme.extend.keyframes sections. Then use the class animate-{name} in your HTML.

Can I create my own keyframes?

Yes. Select "Custom Keyframes" from the animation type dropdown, then enter your own @keyframes CSS in the text area and give it a name.

What Tailwind versions are supported?

The generated config works with Tailwind CSS v3 and v4. The animate- utility classes and keyframes configuration are compatible across both versions.