CSS animation generator

Choose a preset, dial in the timing, easing, iterations and direction, and watch it replay in the preview. Copy the @keyframes and the animation shorthand when it looks right — everything runs in your browser.

Preset

Duration1.0s

Delay0s

Timing function

Direction

Iteration count1

Infinite

Fill mode

Animation name

Generated CSS

Everything runs in your browser. No upload, no sign-up.

How it works

STEP 1

Pick a preset

Start from fade, slide, bounce, pulse, spin or shake. The preview box replays the motion the moment you choose, so you can see exactly what it does.

STEP 2

Tune the timing

Adjust duration, delay, easing, how many times it loops and the direction. Hit Replay any time to watch the new settings in action.

STEP 3

Copy the CSS

Copy the @keyframes block and the animation shorthand with one click and paste them into your stylesheet — nothing is uploaded.