Surface:
Advertisement
Presetfade-in
Duration1s
Easingease
Directionnormal
Fillboth
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.
| 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. |
@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;
} @keyframes and the animation shorthand have excellent browser support. No vendor prefixes needed for modern targets.