CSS Animation Studio

Free Online CSS Animation Generator with Live Preview and 50+ Presets

—

Duration 0.6s

Delay 0s

Easing

Iterations

Direction

Fill mode

Generated CSS

Edit the CSS above to fine-tune keyframes — the preview updates live. Adjusting a control re-generates the rule while keeping your keyframe edits.

Privacy Policy · Terms of Service · Cookies

Create a new animation

Animation name

Duration 1s

Easing

Preview on

Loop

Keyframes

● Live Preview

Animate opacity and transform (move/scale/rotate) — they're smooth and GPU-friendly, and won't cause layout jank.
For an entrance, go from hidden (opacity 0, offset/scaled) at 0% to normal at 100%.
For a bounce/pop, add a middle stop that overshoots (e.g. scale 1.1 at 60%) before settling to 1.
Combine blur + opacity for a polished "focus in" reveal.
Keep UI feedback 0.2–0.6s; use longer, looping durations for ambient effects.
Use Loop here to preview repeats; set direction to alternate in the studio for smooth back-and-forth.
The extra CSS box on each stop accepts any declarations, e.g. background:#f43f5e or border-radius:50%.

View generated CSS