CSS Animation Generator

Pick a preset, tune the timing, preview it live, copy the @keyframes CSS.

Animation

Duration (s)

Easing

Delay (s)

Iterations

Direction

About this tool

CSS animations need an @keyframes rule (property changes over percentages) plus an animation property (which keyframes, how long, what easing). This builds both for 7 common patterns.

Options

Duration/delay in seconds. Easing controls the acceleration curve. Iterations can loop infinitely. Direction can reverse or alternate. Copy and paste straight into your stylesheet.