How to Create a CSS Animation from Keyframes
Keyframes describe the start and end of a motion, and one animation line plays them. This guide walks through naming, duration, timing and repeats.
What is the CSS Animation Generator?
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.
How to use it
- 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.
Worked example
With the name fade-in, a 2 second duration, ease-in-out timing, infinite repeats and the fade style, the result is a fade-in keyframes block going from opacity 0 to opacity 1, plus an .animated rule with animation: fade-in 2s ease-in-out infinite.
How long should an animation last?
Most interface animations feel right between 0.3 and 1 second, while attention-grabbing hero motion can run 1 to 2 seconds. Longer loops risk feeling slow, so test on a real page before settling.
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.