CSS Animation Generator
Preset CSS keyframe animations with live replay and copyable CSS.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this css animation generator
- Pick a preset (fade-in, slide-in-left, scale-in, bounce, shake, pulse, rotate, etc.).
- Set duration in CSS time units, e.g. `1s` or `500ms`.
- Choose a timing function (ease, ease-in-out, linear, or `cubic-bezier(0.4, 0, 0.2, 1)`).
- Pick a delay, an iteration count (a number or `infinite`), and a direction.
- Press Generate CSS and Copy CSS to grab a complete `@keyframes` block plus the matching `animation` shorthand.
About this css animation generator
The CSS animation generator emits a full, copy-paste-ready stylesheet: a named `@keyframes` block plus an `.animated { animation: …; }` rule that wires it to your element. Ten built-in presets cover the animations you actually use day-to-day — fade-in, fade-out, slide-in-left, slide-in-right, slide-up, scale-in, rotate, bounce, shake, and pulse — each defined with the exact keyframes you would otherwise hand-write. A live preview box runs the animation in place so it paints first as the LCP element; a Replay button restarts it whenever you change a control.
Worked example: pick `fade-in`, duration `1s`, timing `ease-in-out`, delay `0s`, iteration `infinite`, direction `normal`. The tool outputs `@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }` followed by `.animated { animation: fadeIn 1s ease-in-out 0s infinite normal; }`. Switch the preset to `bounce` and the keyframes change to `0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); }` while the shorthand stays in the same shape — you only ever rename the animation reference. Set iteration to `1` to play once and stop.
FAQ
- What is the difference between transition and animation?
- A `transition` animates a property between two states triggered by a CSS class change or pseudo-class (e.g. `:hover`). An `animation` runs keyframes that you author explicitly — it can loop, alternate direction, delay before starting, and define many in-between states.
- How do I make the animation play once and stay at the final frame?
- Set iteration count to `1` and add `animation-fill-mode: forwards;` in your CSS (the generator omits fill-mode by default since infinite is the most common choice). The element will hold the final keyframe after the animation completes.
- Which timing function should I pick?
- `ease-in-out` is a safe default. `linear` is right for rotations and progress indicators. `cubic-bezier(0.4, 0, 0.2, 1)` is the Material Design standard easing — punchy and modern.
- Why does the preview restart when I change a control?
- The replay key forces React to remount the preview node, which restarts the CSS animation from frame 0. Press Replay any time to see the full animation again.
- Can I combine multiple animations?
- CSS supports it — separate animation declarations with commas, e.g. `animation: fadeIn 1s ease-out, slideUp 1s ease-out;`. This tool generates one animation at a time; combine the output blocks manually for layered effects.