CSS Keyframes Generator

Build CSS @keyframes animations with a live preview — no hand-writing timing code.

Animation name:

Duration (seconds):

Timing function:

Direction:

From (CSS):

To (CSS):

Output:

CSS appears here…

Live preview:

How to use

Name your animation, set duration, write from/to CSS, and watch the live preview. Everything runs in your browser.

What can I animate?

Any CSS in the from/to boxes — transforms, opacity, colors, box-shadow and more.

Does it loop?

The preview loops infinitely; set your own iteration count when you copy the CSS.

☕

Every tool runs 100% in your browser — no uploads, no signups. If a tool saved you time, consider supporting us with a small donation.