CSS Animation Generator
Create CSS @keyframes animations from presets or your own keyframes, set duration, delay, iterations, direction, fill mode and a cubic-bezier curve.
Presets
Keyframes
One rule per line, e.g. 50% { transform: scale(1.2); }. Edit freely; the preview updates live.
Timing
Preview
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
.animated {
animation: bounce 1s ease 0s infinite normal both;
}
@media (prefers-reduced-motion: reduce) {
.animated {
animation: none;
}
}Related Tools
View AllWhat is CSS Animation Generator?
Builds a complete CSS animation: the @keyframes rule, the animation shorthand and an optional prefers-reduced-motion override. Start from presets such as fade, slide, bounce, pulse, shake, spin or heartbeat, edit the keyframes freely and shape the timing with a draggable cubic-bezier curve.
How to use CSS Animation Generator
- Choose a preset or type your own Keyframes (one rule per line).
- Set the Animation name, Duration and Delay.
- Pick Direction, Fill mode and either Repeat forever or an Iteration count.
- Choose a Timing function or drag the cubic-bezier handles / type X1, Y1, X2, Y2.
- Press Replay to watch it again, then copy the CSS code.
Example
Pulse preset, iterations 3, direction alternate, delay 0.5s, cubic-bezier(0.68, -0.6, 0.32, 1.6), reduced-motion off
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.animated {
animation: pulse 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.5s 3 alternate both;
} When to use CSS Animation Generator
Use it for entrance effects, loaders, attention cues and micro-interactions. For simple state changes (hover colour, size) a CSS transition is enough. Keep the reduced-motion option enabled so users who ask their OS for less motion are not affected by large movements.
How CSS Animation Generator works
The keyframes text is wrapped in @keyframes name { … } and the settings are written in the standard shorthand order name duration timing-function delay iteration-count direction fill-mode. The bezier editor clamps X values to 0–1 (as CSS requires) while Y may overshoot for bounce-like easing; when the four values equal a CSS keyword (ease, linear, ease-in, ease-out, ease-in-out) the keyword is written instead. The name is sanitized to a valid CSS identifier. The preview uses a private keyframes name so it never clashes with the page's own animations.
Common Use Cases
- Fade or slide-in entrance animations
- Infinite spinners and pulsing loaders
- Shake feedback on invalid form input
- Bouncing scroll-down indicators
- Custom easing for brand-specific motion
FAQs
What does fill mode do?
forwards keeps the last keyframe after the animation ends, backwards applies the first keyframe during the delay, both does both, and none applies neither.
Why are X values of the bezier limited to 0–1?
X represents time, which cannot go backwards, so CSS rejects values outside 0–1. Y represents progress and may overshoot to create anticipation or bounce.
What does the reduced-motion option add?
A @media (prefers-reduced-motion: reduce) block that sets animation: none for users who enabled reduced motion in their operating system.