CSS Animation Generator
Build @keyframes visually with a live preview and copyable CSS.
Build an Animation and Watch It Run
Writing @keyframes by hand is a slow loop: change a number, save, reload, watch, change it again. Most of the time what you want is one of eight or nine familiar movements with the timing dialled in, and the fastest way to get the timing right is to watch it change as you drag.
The generated CSS includes a prefers-reduced-motion block as a matter of course. Motion that cannot be turned off causes real symptoms for people with vestibular disorders, and the media query is three lines.
Key features
- Eight animations — fade, slide, pop, bounce, shake, spin, pulse and flip.
- Live preview — replays on every change, with a button to watch it again.
- Full timing control — duration, delay, easing, iteration count, direction and fill mode.
- Named easing presets — including a soft landing and an overshoot, which are the two custom curves most used.
- Accessible by default — the copied CSS already disables the animation under reduced-motion.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: CSS Animation Generator
- Pick a movement
The preview plays it straight away. - Set the timing
Duration and easing matter most. Around 0.3 to 0.6 seconds suits interface motion. - Choose how it repeats
Once for an entrance, forever for a loading indicator. - Copy the CSS
Complete with the keyframes, the class and the reduced-motion block.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Design |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
What does animation-fill-mode do?
It decides what the element looks like before the animation starts and after it ends. <code>both</code> — the default here — holds the first keyframe during any delay and the last one afterwards, which is almost always what you want for an entrance animation that should not snap back.
Why does my animation not run a second time?
Because an animation only plays when it is applied, and reapplying the same class does nothing if the browser sees no change. The usual fix is to remove the class, force a reflow, then add it back — which is exactly what the Play again button does here.
What is prefers-reduced-motion?
A system setting that says the person has asked for less movement. For some people with vestibular conditions, parallax and large motion cause genuine nausea. Honouring it costs three lines and is the difference between a site they can use and one they cannot.
Should I animate with CSS or JavaScript?
CSS for anything that is a state change — hover, entrance, loading. It runs on the compositor and stays smooth under load. JavaScript when the animation depends on input you cannot express as keyframes, such as following a scroll position.