🎬
CSS Keyframe Generator
Build @keyframes animations visually with live preview
⎘ Copy CSS
⚙ Animation Settings
Name
Duration
1.0s
Iterations
1×
2×
3×
Infinite
Delay
0s
Direction
Normal
Reverse
Alternate
Alternate Reverse
Fill Mode
None
Forwards
Backwards
Both
↗ Easing Curve
Custom cubic-bezier
✦ Animation Presets
▶ Live Preview
⏸ Pause
↺ Restart
⏱ Timeline
+ Add Keyframe
✏ Keyframe
✕ Delete
{ } Generated CSS
⎘ Copy