CSS Animation Generator
Name an animation, set its timing and pick a keyframes style, and copy the full animation CSS.
Quick answer: enter your details below and click Generate animation CSS — your result appears instantly, right here in your browser. Nothing you enter is uploaded or stored.
C
Developer
Enter your details below.
How to use
- Enter a name for the animation.
- Set the duration, timing curve and repeat count, then pick a keyframes style.
- Click Generate animation CSS and copy both blocks into your stylesheet.
About this tool
CSS animations move elements without scripting: fades, slides, bounces, spins and pulses all come from keyframes plus one animation line. Name your animation, set its duration, timing curve and repeat count, and pick a keyframes style. This tool writes both the keyframes block and the class that plays it.
Frequently asked questions
What does infinite mean for iteration count?
The animation repeats forever instead of stopping. Use a number like 1 or 3 when it should play a set number of times.
Why do I need both the keyframes and the class?
Keyframes describe the motion, but nothing moves until a class applies the animation line that names them, sets the duration and picks the timing.