Easing · How speed changes
Asymmetric easing非对称缓动
- considered
- intentional
- mature
Using one curve on the way out and a different one on the way back — fast out, slow back, or the reverse — to give the motion hierarchy.
When to use it
Use it when the same element both leaves and returns; for a simple one-way animation, “Ease-out” is enough.
Parameters
out cubic-bezier(0.22, 1, 0.36, 1) 240ms · back cubic-bezier(0.4, 0, 1, 1) 200ms
Recipe
Asymmetric easing → 240ms cubic-bezier(0.22, 1, 0.36, 1)Asymmetric easing → out cubic-bezier(0.22, 1, 0.36, 1) 240ms · back cubic-bezier(0.4, 0, 1, 1) 200ms
One sentence for your AI
Use asymmetric easing for this drawer: cubic-bezier(0.22, 1, 0.36, 1) at 240ms to open, cubic-bezier(0.4, 0, 1, 1) at 200ms to close.