CSS Animation Generator
@keyframes and the animation shorthand from presets — fade, slide, zoom, bounce, pulse, spin — with duration, delay, easing, loops and a reduced-motion guard.
The @keyframes rule, the animation shorthand in the right order, a live preview, the total running time and a prefers-reduced-motion block that switches it off.
Example: slideInUp by 40 px with cubic-bezier(0.34, 1.56, 0.64, 1), 0.5 s delay, 3 alternate runs → animation: enter-card 1s cubic-bezier(…) 0.5s 3 alternate both, done in 3.5 s; spin 2s linear infinite.
Keyframes and the shorthand,
in the right order.
What the presets do, how the shorthand is assembled, and why the reduced-motion block is there.
Presets
Each preset is a small @keyframes rule on transform and opacity only — the two properties browsers animate on the compositor without re-layout. Fades change opacity; slides translate by the amount in pixels; zooms scale from 1 − amount %; bounce, float and shake move and return; pulse scales up and back; spin and flip rotate a full turn; wobble tilts by the amount in degrees.
The shorthand
animation: name duration timing-function delay iteration-count direction fill-mode — the order the page writes, since two time values are read as duration then delay. Easing is a keyword, a cubic-bezier(x₁, y₁, x₂, y₂) with x in 0–1 (y may overshoot for a springy feel), or steps(n, end) for frame-by-frame motion. 0 iterations means infinite. The total time is delay + duration × iterations.
Reduced motion
The prefers-reduced-motion media query switches the animation off for people who asked their system for less motion (vestibular disorders, distraction); WCAG 2.3.3 asks for it. It is included by default; remove it only for motion that is essential to the content. Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.
SOURCES
- CSS Animations Level 1 (@keyframes, animation shorthand order name · duration · timing · delay · count · direction · fill); WCAG 2.3.3 and prefers-reduced-motion (Media Queries 5)
Last reviewed 22 September 2026. How results are checked: How we verify.