CSS Animation Generator

Design CSS keyframe animations visually with live preview. Control duration, timing function, delay and iteration — then copy or download your CSS.

Color
#0ea5e9
Generated CSS
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease 0s infinite normal both;
}

What is CSS Animation Generator?

The CSS Animation Generator lets you create @keyframes animations visually without writing code by hand. Choose from preset animations (fade, slide, bounce, spin, pulse) or build custom keyframes. Adjust duration, timing function, delay, iteration count, and fill mode — all with live preview on a real element.

How to Use This Tool

  1. Choose an animation preset or select Custom to build your own keyframes.
  2. Adjust duration, timing function, delay and iteration count using the controls.
  3. Watch the preview element animate in real time.
  4. Copy the complete CSS (including @keyframes) or download as a .css file.

Frequently Asked Questions