Animation Generator

Build CSS keyframe animations visually with timing, direction, and keyframe controls.

Privacy first: Your files never leave your browser. All processing happens locally on your device.

NameDuration (ms)TimingDelay (ms)

IterationsDirectionFill Mode

Keyframes

Preview

CSS Code

@keyframes fadeIn {
  0% {
    opacity: 0; transform: translateY(10px);
  }
  100% {
    opacity: 1; transform: translateY(0);
  }
}

animation: fadeIn 1000ms ease 0ms 1 normal forwards;

Frequently Asked Questions

What are CSS keyframe animations?

CSS @keyframes define animation states at specific points in time, and the animation property applies those keyframes to elements with timing and iteration controls.

What is the difference between animation and transition?

Transitions animate between two states on property change, while animations can have multiple keyframes, run automatically, and repeat without user interaction.