CSS Animation Generator
About this generator
Most CSS animation generators give you a fade-in slider and a copy button. The output works but it’s brittle — no prefers-reduced-motion guard, no animation-composition, no framework export beyond plain CSS. This generator was rebuilt to ship animations that work in production accessibility audits without you having to remember the eight different things that make a CSS animation polite to ship.
Three things make this different from every other free animation generator. Accessibility by default — toggle the prefers-reduced-motion guard and the export wraps your rule in a @media (prefers-reduced-motion: no-preference) block, so users with vestibular sensitivity don’t get bounced around. animation-composition support — layer multiple animations correctly with the modern replace / add / accumulate compositing modes (Chrome 112+, Safari 16.4+, Firefox 115+). Five framework exports — CSS, SCSS, Tailwind arbitrary-value, React inline-style, Vue scoped CSS.
Curated preset library: 20+ animations across fade, slide (4 directions), zoom, bounce, pulse, shake, spin, flip, rubber-band, flash, swing, wobble, heartbeat, jello, tada — every classic in one place, plus modern attention animations.
Permalink: every adjustment encodes into the URL hash. No login, no watermark, no paywall. Free and MIT-licensed.
How to use
CSS Animation syntax
| Property | Description |
|---|---|
animation-name | References the @keyframes rule by name. |
animation-duration | How long one cycle takes. E.g. 1s or 300ms. |
animation-timing-function | Easing curve: ease | linear | ease-in | ease-out | ease-in-out | steps(n) | cubic-bezier(...). |
animation-delay | How long to wait before the animation starts. |
animation-iteration-count | Number of cycles: a number or infinite. |
animation-direction | Playback order: normal | reverse | alternate | alternate-reverse. |
animation-fill-mode | State outside the active period: none | forwards | backwards | both. |
animation-composition | How multiple animations combine on the same element: replace (default) | add | accumulate. Modern CSS — 2023 baseline. |
@media (prefers-reduced-motion) | Accessibility query: detect when user has OS reduce-motion enabled. Wrap your animation in (prefers-reduced-motion: no-preference) so it only runs for users who haven't opted out. |
CSS Animation snippets
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fade-in 1s ease both;
}/* shorthand order */ animation: name duration timing-fn delay iterations direction fill-mode;
.element {
animation:
slide-up 0.4s ease-out 0s 1 normal both,
pulse 1.2s ease-in-out 0.4s infinite normal none;
}Browser support
@keyframes and the animation shorthand have excellent browser support. No vendor prefixes needed for modern targets.
Frequently asked questions
Why does this generator include a prefers-reduced-motion guard in the export?
Roughly 35% of adults experience some level of motion sensitivity — vestibular disorders, migraine triggers, or simply preferring less visual noise. Users with these issues set prefers-reduced-motion: reduce in their OS accessibility settings (macOS Reduce Motion, Windows Animation, iOS Reduce Motion, Android Remove Animations). A page full of bouncing / spinning / pulsing elements can trigger nausea or migraine. The export wraps your animation rule in @media (prefers-reduced-motion: no-preference) so the animation only runs for users who haven't opted out — accessibility by default, no extra effort. WCAG 2.3.3 (Animation from Interactions) explicitly recommends this approach.
What is animation-composition and when should I use it?
animation-composition (shipped in all evergreen browsers in 2023) controls how multiple animations on the same element COMBINE. The default is replace — a new animation replaces the value from any previous animation. The new modes are add (the new animation's value is added to the previous one) and accumulate (the cumulative value of all animations is applied). This matters when you stack animations — e.g., a base spin animation plus a separate hover scale. With animation-composition: replace (the default), the scale animation overrides the spin entirely. With animation-composition: add, the scale ADDS to the spin so the element spins AND scales at the same time. Most generators ignore this property; this one exposes it so you can layer animations correctly.
Can I save my animation and come back to it later, or does refreshing wipe my work?
Every adjustment encodes into the URL hash — preset, duration, delay, iterations, easing, direction, fill-mode, animation-composition, and the reduced-motion guard toggle. Bookmark a tuned animation, the URL preserves the state. Send the URL to a colleague, they see your exact configuration. No accounts, no servers, no logins.
How does the Tailwind animation export work? Tailwind has animate-spin / animate-pulse built in — why arbitrary values?
Tailwind ships 4 built-in animations (animate-spin, animate-ping, animate-pulse, animate-bounce) — that's 4 out of the infinite possible. The Tailwind export uses the arbitrary-value syntax — animate-[fadeIn_1s_ease_infinite] — plus a separate @keyframes block defined in your CSS. This works on Tailwind v3 and v4 identically. For users on Tailwind v4 with the new @theme animation tokens, the named-keyframes-in-config path also works; the CSS export gives you the raw block you can paste into a @theme block. motion-safe: prefix automatically respects prefers-reduced-motion.
What's the difference between linear, ease, ease-in, ease-out, and ease-in-out?
linear has constant speed — boring for natural motion but right for endless rotations and loading spinners. ease starts slow, accelerates, decelerates — the default and a safe choice for most fade/slide effects. ease-in starts slow then accelerates — feels like an object building momentum (good for exits). ease-out starts fast then decelerates — feels like an object settling into place (good for entrances, the most-used easing for entrance animations on websites). ease-in-out combines both — good for in-place animations like a pulse or breath. The 'steps' option produces choppy frame-by-frame motion useful for typewriter / sprite-sheet effects. For more nuanced curves, use our dedicated cubic-bezier generator.
Should I use CSS animations or JavaScript libraries like GSAP / Framer Motion?
CSS animations are GPU-accelerated, run on the browser's compositor thread (don't block the main thread), and ship with zero JavaScript weight. For 90% of UI animations — entrances, hovers, transitions, loading states, attention animations — CSS is the right answer. JavaScript libraries are necessary when you need: (1) scroll-driven animations with precise mid-animation control, (2) complex sequenced timelines across multiple elements, (3) physics-based motion (springs, dampening), (4) interaction-driven transforms (drag-to-dismiss, gesture-following). Framer Motion ships ~30KB gzip; GSAP ~25KB. If your animation can be expressed as @keyframes, prefer CSS — the perf difference matters on lower-end devices and the bundle savings compound.
Why does my animation 'jump' at the end and then snap back to the start?
That's the default fill-mode: none behavior — when the animation finishes, the element snaps back to its pre-animation state. Most of the time you want fill-mode: forwards (element stays in its final keyframe's state after the animation ends) or fill-mode: both (combines forwards + backwards — the animation's first keyframe applies BEFORE the delay elapses, and the last keyframe state persists after). The generator defaults to fill-mode: both because it's almost always what you want for entrance animations. Change to none for animations that should reset (like a hover bounce that returns to neutral).
Is this free for commercial use?
Free, MIT-licensed, zero attribution required, no watermark, no signup, no upgrade tier hiding features. Use the generator on a paid project, client deliverable, startup landing page, enterprise design system — none of those need permission.
See it used in real designs
Browse hand-coded collections that put this tool to work.
