缓动曲线Easing

4 条曲线同时进场，谁先可读

同样的距离、同样的时长，只有曲线不同。点播放，看 4 张通知谁先进入视线、谁显得机械——判决长在每张通知上。

知识点总结：曲线 = 速度随时间的分布

把刚才看到的运动命名清楚。斜率即速度：陡=快，缓=慢。

• ease-out（快进慢停）前段陡、末段缓。目标先到达视线再轻轻落定，进入场景最常用——刚才它最早达到可读。
• ease-in（慢进快出）前段缓、末段陡。进入时显得卡顿，但适合离场——对象加速离开，不拖泥带水。
• ease-in-out（两端缓和）起止都缓、中段快。适合较大幅度的连续状态切换（页面转场），小位移反而显拖。
• linear（匀速）斜率不变。看起来机械，只适合进度条、加载这类"如实反映进度"的场景，不要用在进入离开。
• 时长匹配距离刚才切到 700ms 会觉得拖，因为通知位移小。小位移用 150–250ms，大位移或页面转场才到 400ms 以上。

什么时候用

从你感到的「别扭」出发，反推该不该上缓动、用哪条。

• 状态切换显得突兀（弹层、抽屉、Tab）：进入用 ease-out，离开用 ease-in 或更快的 ease-in。
• 连续大幅度变化（页面转场、卡片翻转）：用 ease-in-out，两端缓和更自然。
• 如实反映进度（下载、上传进度条）：用 linear，不要用 ease-out 假装更快完成。
• 不建议单独靠缓动表达"成功/失败"：动画只表达过程，结果仍要文字或语义反馈（见 transition / interaction-feedback）。

怎么用：从感到别扭到写下可验收规则

最短路径是先定方向，再选曲线，最后把时长和距离一起验收。

1. 定方向这是进入、离开，还是连续切换？进入→ease-out，离开→ease-in，连续→ease-in-out。
2. 选时长按位移大小：小位移 150–250ms，大位移 300–500ms。超过 500ms 的微交互基本都拖。
3. 写下 CSS transition: transform 220ms ease-out; 或动画关键帧里指定 animation-timing-function: ease-in;。只动 transform / opacity，避免布局抖动。
4. 验收三件事方向对、时长不拖、动画可被打断且最终状态正确；切换 prefers-reduced-motion 后要么瞬切、要么仍可读。

正反例：同一张通知进场

只改曲线这一个变量，看用户感到的差别。