Azad
tool //
CSS Animator
Runs on your device
← All tools
CSS Animator — CSS Animation Studio
Presets
Type
Timeline
Advanced
🎲 Surprise me
Animation type
Fade & translate
Scale / zoom
Rotate
Flip (3D)
Skew
Parallax shift
Pulse / heartbeat
Swing
Bounce
Wiggle / shake
Multi-step waypoints
Color shift (text/bg)
Gradient pan
Shape morph
Blur reveal
Mode
In (enter)
Out (exit)
Attention
Define custom spatial keyframes. Auto-sorted by timeline percentage.
+ Add waypoint
Bounce distance
Rotation (deg)
Shift
Opacity start/end
Translate X
Translate Y
Scale factor
Axis
Z
X
Y
Degrees
Flip axis
Horizontal (Y)
Vertical (X)
Perspective (px)
Skew X (deg)
Skew Y (deg)
Peak scale
Swing angle (deg)
Blur radius (px)
Parallax axis
Vertical (Y)
Horizontal (X)
Shift distance
Start BG
End BG
Start text
End text
Type
Linear
Radial
Conic
Angle/pos
Color 1
Color 2
Color 3
Start border-radius
End border-radius
Duration
ms
s
Delay (ms)
Iterations
Infinite
Direction
normal
reverse
alternate
alternate-reverse
Fill mode
forwards
backwards
both
none
Play state
running
paused
Easing profile
ease
linear
ease-in
ease-out
ease-in-out
Spring (overshoot)
Steps (6)
Custom bezier (visual editor)…
Curve editor
Drag the two handles to shape the easing. P1 sets the start, P2 sets the end. Pull past the edges for spring/anticipation.
cubic-bezier(0.25, 0.1, 0.25, 1)
Selector (.class, #id)
Trigger
On load
On hover
On click (JS)
Scroll observer (JS)
Scroll-driven (CSS)
The selector and trigger control the exported code, not the preview. The preview always auto-plays so you can see the motion.
Range start
entry 0%
cover 0%
Range end
cover 100%
exit 100%
Transform origin
Origin X
Origin Y
Origin Z
px
rem
Output options
Composition
replace
add
accumulate
GPU accel
A11y motion
LIVE CANVAS
Box
Circle
Text
Card
Button
◐ BG
↑ Scroll down to reveal ↑
Motion
↓ Scroll up to reveal ↓
0%
CSS
Tailwind
React
Copy
Download