Keyframe Animator

Build CSS @keyframes animations visually. Drag the timeline, tweak properties, copy the CSS.

Presets

Live preview

Timeline

0%
25%
50%
75%
100%
0%
100%

Generated CSS

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

.animated {
  animation: my-animation 1s ease 1 normal forwards;
}

Keyframe at 0%

0%
1
0px
0px
1
0deg

Animation Controls

1s