✨

CSS Animation Generator

Create CSS keyframe animations with a live preview and copyable code.

AnimationDuration: 1sTimingRepeat

▦

@keyframes ug-fade {
  from { opacity: 0; } to { opacity: 1; }
}
.element {
  animation: ug-fade 1s ease 1;
}

🔒 This tool runs entirely in your browser. Your data is never uploaded.

Frequently asked questions

Can I preview the animation?＋

Yes — it plays live and you can replay it, then copy the @keyframes and animation CSS.

Can it loop?＋

Yes — set the repeat count to a number or to infinite.