Design a CSS animation visually: pick an effect, set the duration and timing, watch the live preview, then copy the ready-to-use CSS including the keyframes.
How to Use
- Pick an animation effect from the list.
- Set the duration, timing curve and repeat count.
- Watch it play in the live preview — press Replay to watch again.
- Copy the CSS and paste both parts into your stylesheet.
Key Features
- Eight effects — fade, slide, bounce, pulse, spin, shake, flip and zoom.
- Live preview — the demo box animates as you adjust settings.
- Full control — duration, timing curve and repeat count.
- Copy-ready CSS — the animation rule plus the matching keyframes.
- 100% private — runs entirely in your browser; nothing is sent or stored.
FAQs
How do I use the copied CSS?
Paste both parts into your stylesheet: the .animated-element rule goes on the element you want to animate, and the @keyframes block can sit anywhere in the same stylesheet. Rename the class to suit your markup.
Why two parts?
The animation property says what to play, while the keyframes describe the motion itself — CSS needs both to render the effect.
Will this work in all browsers?
CSS animations and keyframes are supported by all modern browsers, on desktop and mobile.
Is my data sent anywhere?
No. Everything runs entirely in your browser and never transmits or saves anything.
Related Tools
Try these related tools: CSS Gradient Generator, CSS Box Shadow Generator and CSS Loader Generator.