Easing
You might say
This animation feels choppy. Can it speed up and slow down more naturally?
Control how motion speeds up and slows downEasing changes the pace of a transition or animation over time. Ease-out often feels responsive for an element entering, while ease-in can suit an element leaving. Choose a small motion set and judge it in the real interaction, not from curve names alone.
Know first
When to use it
- Make entering motion settle naturally
- Let an exiting element accelerate away
- Give repeated interactions a consistent rhythm
- Tune a transition without changing its path
When NOT to use it
- Choose a curve only because its name sounds right
- Use dramatic bounce for routine controls
- Mix many easing curves in one flow
- Make the beginning so slow that input feels delayed
Anatomy
Horizontal axis: time →Vertical axis: progress ↑
The curve maps time to progress. Its slope is the animation’s instantaneous speed: a steeper slope moves faster, while a flatter slope moves slower.
The horizontal axis represents time from the start to the end of the animation
The vertical axis represents the fraction of the property change that has completed
Variants
ease-out
Entering and appearing, first quickly and then steadily.
ease-in
Exit and disappear, speed up and leave
ease-in-out
Switch to the original state, both ends are soft
cubic-bezier
Fine-tuning for a unique brand feel
Typical use cases
Panel opening
B
I
🔗
🖱️
ease-out: The color changes first quickly and then slowly, and the fingers can feel "following the hand"
Menu closing
ease-out entry: rush in quickly and "brake" to a stop before reaching the point
Card movement
ease-in: start slowly, then accelerate away
Page transition
Design specifications · Animation Tokens
--ease-standard
cubic-bezier(.2,.8,.2,1)
Button hover
Pop-up admission
Card floats
Use this one all
Further reading