CSS Animation Generator
Build a CSS @keyframes animation from presets like fade, slide, spin, and bounce with a live preview. Free online CSS animation generator.
Duration: 1.5s
Free CSS Animation Generator
Build a CSS @keyframes animation from ready-made presets — fade, slide, spin, or bounce — and customize duration, timing, iteration count, and direction, with a live preview and a Replay button.
How to Use It
Name your animation, pick a preset, and adjust the duration, timing function, iteration count, and direction. Watch the preview box animate live, then copy the generated @keyframes andanimation CSS.
Example
Choosing "Bounce" with a 1.5s duration and infinite iterations generates a@keyframes block that translates an element up and down repeatedly — a common loading or attention-grabbing effect.
Common Use Cases
- Adding an entrance animation (fade or slide) to a modal or card component.
- Building a loading spinner using the Spin preset.
- Creating an attention-drawing bounce effect for a call-to-action button.
FAQs
Why doesn't my animation restart when I change settings?
Some browsers won't replay a CSS animation just because its properties changed if it's already running the same keyframe name — click "Replay Animation" to force a fresh restart in the preview.
Can I combine multiple keyframe effects?
Yes — copy this generator's output and add more properties inside the same @keyframespercentage steps (like combining opacity and transform together).
Is my data uploaded anywhere?
No — the CSS is generated and previewed entirely client-side in your browser.