✨ CSS Animation Generator
Build CSS keyframe animations visually. Configure duration, timing, iteration and transform. Generate production-ready @keyframes CSS with live preview — all in your browser.
About the CSS Animation Generator
This tool helps you build CSS keyframe animations visually. Pick an animation type (bounce, rotate, pulse, slide, fade, swing), set duration, timing function, delay, iteration and direction. The preview animates live and the generated CSS includes both @keyframes and the animation shorthand.
How to use
- Name your animation and set a duration.
- Pick a timing function (ease, linear, cubic-bezier, etc.).
- Choose an animation type to drive the keyframes.
- Adjust distance/angle and iteration count.
- Click Update Preview, then Copy CSS to use in your project.
Frequently asked questions
What does "infinite" iteration mean? The animation repeats forever. Replace it with a number (e.g. 3) to play a fixed number of times.
Can I combine multiple transforms? This tool generates one transform type per animation. To combine rotate + scale, edit the keyframes manually to merge transform values.
Why does my animation jump at the end? Try setting direction to alternate so it reverses on each cycle, producing a seamless loop.