缓动Easing
你可能会说
动画一卡一卡的不自然，能不能像真实的东西那样有快有慢？
缓动是规定动画在持续时间内如何加速和减速的速度曲线进度条和持续旋转常用 linear，界面入场常从快到慢，退场常从慢到快。具体曲线要结合移动距离和界面语义测试；项目里应收敛成少量可复用规则，回弹等物理运动再考虑弹性 Spring。
也常被叫作动效曲线动画曲线Easing Curve
组成结构 · Anatomy
横轴：时间 →纵轴：进度 ↑
弯在哪里，快慢就在哪里
横轴，动画从头播到尾
纵轴，属性变到了多少
常见变体 · Variants
先快后慢ease-out
入场与出现，先快后稳停住
先慢后快ease-in
退场与消失，加速离场
两头都缓ease-in-out
原地状态切换，两端都柔和
自定义曲线cubic-bezier
要独特品牌手感时微调
典型使用场景
按钮悬停的手感
B
I
🔗
🖱️
ease-out：变色先快后慢，手指能感到“跟手”
弹窗入场刹车
ease-out 入场：快速冲进来，到点前“刹车”停稳
元素退场加速
ease-in 退场：起步较缓，随后加速离开
全站统一动效曲线
设计规范 · 动效 Tokens
--ease-standard
cubic-bezier(.2,.8,.2,1)
按钮悬停
弹窗入场
卡片浮起
全用这一条
延伸阅读 · 权威出处