🎬 CSS Animation Generator
Build keyframe animations visually, preview in real-time, and export CSS
Preview
Anim
▶ Play
↺ Reset
Animation Settings
Name
Duration (s)
Timing
ease
linear
ease-in
ease-out
ease-in-out
bounce
steps(5)
Iterations
1
2
3
5
infinite
Direction
normal
reverse
alternate
alternate-reverse
Fill Mode
none
forwards
backwards
both
Delay (s)
Presets
Bounce
Shake
Pulse
Spin
Fade In
Slide In
Swing
Rubber Band
Flip
Jello
Keyframes
+ Add Keyframe
Clear All
Edit Keyframe
%
0%
translateX
0px
translateY
0px
scale
1
rotate
0°
skewX
0°
opacity
1
background
border-radius
box-shadow
Generated CSS
📋 Copy
Copied!