🎞️

CSS Animation Generator

Build @keyframes animations visually with live preview. Adjust controls, add keyframe stops, and copy the generated CSS.

Quick Presets

Animation Controls

1s
0s

Keyframes

%
%
%

Live Preview

🎞️

Select a preset or adjust controls to preview

Preview updates in real time as you adjust controls

Generated CSS

@keyframes myAnimation {
  0% {
    opacity: 1;
    background-color: #6366f1;
  }
  50% {
    opacity: 1;
    background-color: #6366f1;
  }
  100% {
    opacity: 1;
    background-color: #6366f1;
  }
}

.element {
  animation: myAnimation 1s ease 0s 1 normal none;
}

Animation Shorthand

animation: myAnimation 1s ease 0s 1 normal none;
name — identifier for @keyframes
duration — how long one cycle takes
timing — acceleration curve
delay — wait before starting
iteration — number of cycles
direction — play direction
fill-mode — state before/after

CSS Animation Generator — build @keyframes animations visually

🎞️ 8 Presets ⚡ Live Preview 🔑 Custom Keyframes 📋 Copy CSS