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.

Related tools

Aspect ratio · calculator Calculate an aspect ratio (16:9…) and derive a missing proportional dimension. Barcode generator Generate a barcode (EAN-13, Code128, UPC) from a value, downloadable, in your browser. Base64 → image Decode a data URI or Base64 into a viewable, downloadable image, in your browser. CSS border-radius · generator Create CSS rounded corners (border-radius) with a live preview and copy-ready code. CSS box-shadow · generator Generate a CSS box-shadow with a live preview and copy-ready code. Green screen remover Make a background color (green/blue screen) transparent and export a PNG, in your browser.