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
Easing Curve
You can say this to an AI Agent
Choose task-appropriate easing for modal entry and exit: respond quickly and settle on entry, leave more decisively on exit. Test with actual travel distance, consolidate into a small motion-token set, and respect reduced motion.
When to use it
- Make entering motion settle naturallyease-out: starts fast, then slows to a stop.
- Let an exiting element accelerate awayease-in: starts slowly, then accelerates away.
- Give repeated interactions a consistent rhythmFour cubic-bezier values can shape any curve.
- Tune a transition without changing its path--easeButtonCardDialogReuse a small set of curves by motion type to balance consistency with context.
When NOT to use it
- Choose a curve only because its name sounds rightlinear keeps a constant speed and does not suit every entrance movement.
- Use dramatic bounce for routine controlsUsing ease-in for entrance can make the initial feedback feel sluggish.
- Mix many easing curves in one flow
- Make the beginning so slow that input feels delayedBoth ends overshoot and rebound out of control; use a spring when you need elasticity.
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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check