CSS Animation Generator
Generate CSS keyframe animations online for free — choose an effect, tune duration, delay and timing, preview it live, and copy the @keyframes and animation code.
100% private — runs entirely in your browser. Your files never leave your device.
Choose a keyframe animation and tune its timing. Copy both the @keyframes rule and the
animation shorthand into your CSS. Runs entirely in your browser.
How to use the CSS Animation Generator
- Choose a keyframe animation.
- Set duration, delay, timing and iterations.
- Replay to preview it.
- Copy the @keyframes and animation CSS.
What you can use it for
- Add entrance and attention animations
- Grab ready-made @keyframes
- Tune timing without writing CSS
- Preview effects before using them
More free tools
Styling a website?
Generate shadows, gradients, layouts and effects with our free CSS tools — copy the code and go.
Frequently asked questions
What does it generate?
A @keyframes rule plus the animation shorthand for effects like fade, slide, bounce, pulse, spin, shake and flip.
Can I control the timing?
Yes — set duration, delay, timing function and iteration count, and replay the preview.
How do I use the output?
Paste the @keyframes rule into your CSS and add the animation shorthand to the element you want to animate.
Is my data uploaded?
No — everything is generated in your browser.