缓动与曲线 · 快慢怎么变
非对称缓动Asymmetric easing
- 考究
- 有意图
- 成熟
去和回用不同的曲线:去的快、回的慢,或者反过来,让动作更有主次。
什么时候用它
同一个元素既会移出又会移回时用它;简单的单程动画用“缓出”就够。
参数
out cubic-bezier(0.22, 1, 0.36, 1) 240ms · back cubic-bezier(0.4, 0, 1, 1) 200ms
配方
非对称缓动 → 240ms cubic-bezier(0.22, 1, 0.36, 1)非对称缓动 → out cubic-bezier(0.22, 1, 0.36, 1) 240ms · back cubic-bezier(0.4, 0, 1, 1) 200ms
给 AI 的一句话
给这个抽屉做非对称缓动:打开用 cubic-bezier(0.22, 1, 0.36, 1)、240ms,关闭用 cubic-bezier(0.4, 0, 1, 1)、200ms。