Tailwind Animation Generator
Pick, customize, and preview Tailwind CSS animations visually.
Animation
Preview
What is a Tailwind Animation Generator?
A Tailwind animation generator is a visual builder that turns animation settings into ready-to-paste Tailwind CSS configuration. Instead of hand-writing keyframes and guessing at timing functions, you choose an animation, tune its duration, delay, and easing, and the tool writes the exact tailwind.config.js block together with the utility class you use in your markup.
Tailwind ships with four built-in animations: animate-spin, animate-ping, animate-pulse, and animate-bounce. Each couples a keyframe definition with an animation shorthand. Spin rotates an element a full turn, Ping scales an element while fading it out, Pulse fades opacity up and down, and Bounce moves an element vertically. These cover most loading, notification, and attention effects.
When the four defaults are not enough, Tailwind lets you register custom animations through theme.extend.animation and theme.extend.keyframes. The generator formats both sections for you, including the camelCased property names Tailwind expects, so a keyframe written as animation-timing-function is emitted as animationTimingFunction in the config object.
The whole tool runs entirely client-side in your browser. Nothing is uploaded, and the animation shown in the preview box is generated from the same values used to build the copied code, so what you preview is what you ship.
Key Concepts
- Built-in animations — Spin, Ping, Pulse, and Bounce, each with a fixed keyframe definition.
- Custom keyframes — a name plus a
@keyframesbody that the generator converts into a Tailwind keyframes object. - Duration — how long a single iteration takes, from 75ms up to 5s, defaulting to 300ms.
- Delay — an optional pause before the animation begins, from none up to 1s.
- Easing — linear, ease-in, ease-out, or ease-in-out, mapped to a timing function in the shorthand.
- animate-{name} utility — the class Tailwind derives from the animation key, such as
animate-spin.
How to Use
- Choose an animation — Select one of the four built-in animations, or pick Custom Keyframes to write your own.
- Set the timing — Pick a duration from 75ms to 5s and an optional delay from none to 1s.
- Select an easing — Choose linear, ease-in, ease-out, or ease-in-out for the motion curve.
- Preview the result — Click Play to see the animation in the preview box and Stop to reset it.
- Copy the generated code — Copy the
tailwind.config.jssnippet and the HTML example into your project.
Built-in Animations Reference
| Animation | Utility class | Transform / effect | Default duration | Easing |
|---|---|---|---|---|
| Spin | animate-spin | rotate 0deg to 360deg | 1s | linear |
| Ping | animate-ping | scale to 2 with opacity 0 at 75% and 100% | 1s | cubic-bezier(0, 0, 0.2, 1) |
| Pulse | animate-pulse | opacity 1 at 0% and 100%, 0.5 at 50% | 2s | cubic-bezier(0.4, 0, 0.6, 1) |
| Bounce | animate-bounce | translateY -25% and translateY 0 | 1s | cubic-bezier(0.8, 0, 1, 1) |
| Control | Available values | Default |
|---|---|---|
| Duration | 75ms, 100ms, 150ms, 200ms, 300ms, 500ms, 700ms, 1s, 2s, 3s, 5s | 300ms |
| Delay | None, 75ms, 100ms, 150ms, 200ms, 300ms, 500ms, 1s | None |
| Easing | Linear, Ease In, Ease Out, Ease In Out | Ease Out |
Worked Examples
- Spin with 1s and Linear — generates
animation: { 'spin': 'spin 1000ms linear infinite' }with the rotate 0deg to 360deg keyframes. - Pulse with 2s and Ease In Out — generates the shorthand
pulse 2000ms cubic-bezier(0.4, 0, 0.2, 1) infiniteand the opacity 1 / 0.5 keyframes. - Ping with 1s and Ease Out — produces
ping 1000ms cubic-bezier(0, 0, 0.2, 1) infiniteand keyframes scaling to 2 with opacity 0. - Bounce with 1s and Ease Out — emits
bounce 1000ms cubic-bezier(0, 0, 0.2, 1) infinitewith the translateY -25% / 0 keyframes. - Custom fade with 500ms and Ease In — a keyframes block of
0% { opacity: 0; }and100% { opacity: 1; }namedfadebecomesfade 500ms cubic-bezier(0.4, 0, 1, 1) infinite. - Custom slide with a 200ms delay — with duration 300ms and Linear easing the shorthand is
slide 300ms 200ms linear infinite, and the HTML usesanimate-slide.
Tips and Common Mistakes
- The duration and easing dropdowns drive the output — the built-in keyframes are fixed, but the shorthand uses whatever duration, delay, and easing you select.
- Pick a default duration that makes sense — the tool starts at 300ms, which is fast for loops; loading spinners often look better at 1s.
- Name custom keyframes without spaces — the name becomes the
animate-{name}class, so use dashes such asmy-animationrather than spaces. - Do not add the
@keyframeswrapper in the textarea — enter only the inner rule body such as0% { ... }. - Remember the property naming — hyphenated CSS properties are automatically converted to camelCase for the Tailwind config.
- Preview before copying — click Play to confirm the speed and easing, then Click Stop before switching animations.
Common Use Cases
Animation generators are useful whenever you want polished motion without writing keyframes by hand. Here are some practical scenarios where this tool speeds up the workflow.
- Loading spinners — generate a Spin or custom rotation and drop the class onto an icon while data loads.
- Notification pulses — add a Ping effect to status dots so new activity is easy to notice.
- Skeleton loaders — use a tuned Pulse to gently fade placeholder blocks while content resolves.
- Attention badges — a Bounce draws the eye to a call-to-action or a limited-time offer.
- Custom micro-interactions — build one-off fades, slides, or scales that are not in the default Tailwind set.
- Design system tokens — register shared animation keys once in the config so every component uses the same motion.
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.
What duration and delay values can I choose?
Durations range from 75ms up to 5s (75, 100, 150, 200, 300, 500, 700, 1000, 2000, 3000, and 5000 milliseconds), defaulting to 300ms. Delays can be none or 75, 100, 150, 200, 300, 500, or 1000 milliseconds.
How does the easing dropdown map to CSS?
Linear maps to linear, Ease In to cubic-bezier(0.4, 0, 1, 1), Ease Out to cubic-bezier(0, 0, 0.2, 1), and Ease In Out to cubic-bezier(0.4, 0, 0.2, 1). The selected value is written into the generated animation shorthand.
Why does the animation loop forever?
Every generated shorthand ends in infinite so the animation repeats. Remove the infinite keyword from the generated config if you need a one-shot animation.
Are the built-in durations used automatically?
The built-in keyframes are always used for Spin, Ping, Pulse, and Bounce, but the duration and easing in the generated shorthand come from the dropdowns you select, not from a hidden default.
Is the generator free and private?
Yes. It is completely free and runs entirely in your browser. No animation data is uploaded, stored, or shared with any server.