CSS Animation Generator

Build @keyframes animations visually. Presets, easing, live preview, CSS output.

Presets

Duration: 600ms

Delay: 0ms

Easing

Iterations

element

CSS output

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 600ms ease-out 0ms 1;
}