Free Online CSS Animation Generator

1. Choose a preset: fade, slide, bounce, spin or pulse.
2. Set the duration, timing function and iteration count.
3. Watch the live box play your animation on loop.
4. Copy the @keyframes and animation CSS into your stylesheet.

CSS Animations, specified in the CSS Animations Module Level 1, let you animate property changes over time without JavaScript. They have two parts: an @keyframes at-rule that names the animation and lists the property values at each step (from/to or percentage keyframes), and an animation property on the element that references that name and sets duration, timing function, iteration count and more.

This generator ships ready-made keyframes for common effects — fade, slide, bounce, spin and pulse — and exposes the timing controls so you can tune them. It plays the result on a live element on loop, so you can feel the easing before copying.

For smooth performance the presets favour transform and opacity, which browsers can composite on the GPU without triggering layout reflow or repaint — the standard advice for jank-free animation. Use the output for hover effects, loading spinners and subtle micro-interactions. Both the @keyframes and the animation rule are generated in your browser.