CSS Animation Generator

Compose a @keyframes animation with a live preview on the sample element below. Pick a name, set the duration, timing function, iteration count, direction, fill mode, and delay; edit the stops to taste; copy the ready-to-paste CSS in one click. Pure client-side, no upload.

Animation settings

Name Duration

Delay

Iterations Direction Fill mode Timing Custom timing

Keyframe stops

2 stops

One CSS declaration per line inside each stop, or paste a block. Stops are sorted by percent on render; duplicates collapse to the last one.

Live preview

Pause

Sample

The preview re-runs the animation every time you change the settings.

CSS output

Selector

—