🎨

CSS Animation Generator

css · animation · keyframe · transition · effect

DurationTimingIteration

CSS

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.animated { animation: fadeIn 1s ease infinite; }

How to use

1
Pick an animation preset.
2
Adjust duration, timing and iteration.
3
Copy the generated CSS.

FAQ

Is this tool free?

Yes — no sign-up, no installation, completely free to use right away.

What is this tool?

Build CSS keyframe animations with live preview — control duration, easing, delay, iteration, direction, and fill mode You can use it for free with no sign-up or installation — just open the page and start right away.