Keyframe Animation Maker

Build CSS keyframe animations visually — pick a property, set from/to, preview the motion live.

Property: From: To: Duration: 2s Animation name:

@keyframes …

How to use

Choose a property and values, set duration, preview the loop live and copy the CSS.

Which properties can I animate?

Opacity, translate, scale, rotate and background color — the most useful ones.

Does it output @keyframes?

Yes — the full @keyframes block plus the animation shorthand, ready to copy.

☕

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