Build custom Tailwind animations — fade, slide, zoom, wiggle, float, shake — with duration and easing controls, a live replayable preview, and v3 config, v4 @theme or plain CSS output.
Settings
Generated locally in your browser — your settings and results never leave this page.
Beyond spin, ping, pulse and bounce
Tailwind ships four animations; real interfaces need entrances, exits and attention cues. This generator builds ten more — fades, slides, zoom, wiggle, float, heartbeat, shake — with duration, easing (including an overshoot bezier) and looping under your control, previewed live and replayed on every settings change.
Registering custom animations
In v3, keyframes and the animation shorthand go under theme.extend — that creates the animate-slide-up class. In v4, a --animate-slide-up property in @theme plus a plain @keyframes block does the same. The generator emits both, and a standalone CSS version for projects without Tailwind.
Worked example (v4)
@theme {
--animate-slide-up: slide-up 0.35s ease-out both;
}
@keyframes slide-up {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}Accessibility and performance built in
- The CSS export disables the animation under
prefers-reduced-motion: reduceby default — vestibular-safe motion is a requirement, not a nicety. - Only opacity and transforms are animated: compositor-friendly properties that stay off the main thread. No width/top/margin animation — that is a deliberate limitation, not a missing feature.
Common mistakes
- Forgetting
both/forwardsfill mode on entrance animations — the element snaps back to its pre-animation state. The generated shorthand includes it. - Triggering: the class animates when it enters the DOM. For scroll reveals, add the class via IntersectionObserver — triggering is app logic, not animation CSS.
How to use the Tailwind Animation Generator
- Choose an animation and tune duration, easing and looping.
- Watch the live preview — change any setting to replay it.
- Pick the output: v4 @theme, v3 config, or plain CSS.
- Copy it and use the class (animate-fade-in, animate-wiggle…) in your markup.
Frequently asked questions
How do custom animations work in Tailwind?
In v3 you register keyframes and an animation shorthand under theme.extend, which creates the animate-* class. In v4 you declare –animate-* in @theme plus the @keyframes in CSS. This generator emits both, plus standalone CSS for non-Tailwind projects.
Why does the output include prefers-reduced-motion?
Because vestibular-safe motion is not optional: users who enable "reduce motion" should not get wiggling or floating UI. The plain-CSS export disables the animation under that media query by default — delete it consciously if ever, not accidentally.
Which properties are animated — and why only those?
Opacity and transforms. They are compositor-friendly: browsers animate them on the GPU without reflow, keeping animation off the main thread. Animating layout properties (width, top, margin) janks — that is a limitation worth keeping.
How do I trigger the animation on scroll or on mount?
The class starts animating when it appears in the DOM, so adding the class on mount (or via IntersectionObserver for scroll reveals) is the trigger. The generator handles the animation itself; triggering is app logic.
