Color & CSS
CSS Animation (Keyframes) Generator
The CSS Animation Generator lets you pick from common effects -- bounce, spin, pulse, slide and fade -- and preview them live before copying the CSS.
Adjust duration, easing and whether it loops, then grab the generated @keyframes rule and animation property for your own project.
How to Use the CSS Animation (Keyframes) Generator
- Open the CSS Animation Generator.
- Pick an effect, duration and easing.
- Watch the box animate live, and use Replay to watch again.
- Copy the generated @keyframes CSS into your project.
Frequently Asked Questions
What effects are available?
Bounce, Spin, Pulse, Slide In and Fade In -- five common, ready-to-use animation styles.
Can I change the animation to run only once?
Yes, uncheck "Loop infinitely" to generate an animation that plays once instead of repeating.
Is anything uploaded when I use this tool?
No. The animation preview and code generation happen entirely in your browser.
Advertisement
Sponsored