CSS @keyframes Animation Generator with Preview

Generate a CSS @keyframes animation (fade, slide, bounce…) with preview and code.

Durations

▸CSS

@keyframes pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.element {
  animation: pulse 1s ease-in-out infinite;
}

🔒 100% client-side — no data sent

Build CSS @keyframes animations and copy ready-to-use code with a live preview. Tweak steps, duration and timing without writing anything by hand. The tool runs entirely in your browser, with no data sent anywhere.

What is it for?

▸ Prototype a button or icon animation
▸ Generate @keyframes code without memorizing it
▸ Preview an animation before integrating it
▸ Fine-tune duration and easing in real time

FAQ

Can I copy the generated CSS?

Yes, the full @keyframes code is ready to paste.

Is the preview live?

Yes, every change updates the animation instantly.

Can I choose the timing function?

Yes, set duration, easing and repetitions.