ease-out 标准
ease-out
cubic-bezier(0, 0, 0.2, 1)- 用在哪
- 最安全的进场默认值。卡片、气泡、下拉菜单从无到有。
- 别用在哪
- 大位移场景（全屏面板推开），起步太陡会显得「冲」。
200ms
Easing · 18 条
18 条曲线，18 种性格
曲线本身没人记得住，记得住的是「这个看起来急」。所以这里不讲数学，讲它给人的感觉、适合放在哪儿、以及放在哪儿会出问题。
每张卡片里那条虚线对角线是匀速参照系 —— 曲线偏离它多少，就是这条缓动的「性格」有多少。点「播放」看它真实跑一遍。
顺序按用途分三组（18 条 = 进场 7 · 退场 4 · 位移 7）， 不是按 cubic-bezier 数值排 —— 你要找的是「这种场合该用什么」，不是「0.16 在哪一页」。
对照台
「手感」是比出来的，不是看出来的。选两条曲线，让它们在同一帧起跑。
ms
选两条曲线
未选
未选
在下方任意卡片上点「对照」，选满两条即可开跑。
进场
7 条元素从无到有。观众只看得到「出现」这一下，所以要快、要稳。
ease-out 夸张
expo out
cubic-bezier(0.16, 1, 0.3, 1)- 用在哪
- 要「高级感」时的第一选择。弹窗、抽屉、大图入场。
- 别用在哪
- 高频重复的微交互（hover、列表项），每次都这么夸张会累。
320ms
ease-out 五次
quint out
cubic-bezier(0.22, 1, 0.36, 1)- 用在哪
- 想要 expo 的高级感但嫌它太急，用这条收敛一点。
- 别用在哪
- 短时长（<150ms）下它和标准 ease-out 几乎分不出来，白费。
280ms
ease-out 圆润
circ out
cubic-bezier(0.33, 1, 0.68, 1)- 用在哪
- 末端尤其缓，适合「飘落」「浮现」这类需要余韵的进场。
- 别用在哪
- 需要明确「到此为止」的提示（来消息、报错），太软会显得没发生。
360ms
回弹进场
back out
cubic-bezier(0.34, 1.56, 0.64, 1)- 用在哪
- 轻微过冲再回位。适合「蹦出来」的小元件：徽标、点赞、气泡。
- 别用在哪
- 信息密度高的界面。回弹会让用户以为有后续动作。
320ms
强回弹
back in-out
cubic-bezier(0.68, -0.55, 0.27, 1.55)- 用在哪
- 两端都过冲，戏剧性强。适合空状态、引导页这类一次性的展示。
- 别用在哪
- 业务界面几乎都不该用。负向起步会被误读成「加载失败」。
480ms
轻微过冲
subtle overshoot
cubic-bezier(0.175, 0.885, 0.32, 1.275)- 用在哪
- 若隐若现的弹跳。想做「活」一点但又不想被注意到的场合。
- 别用在哪
- 和「回弹进场」同时出现在一屏里——差别太小，只会显得不一致。
300ms
退场
4 条元素从有到无。离开不该抢戏，通常比进场更快、更直接。
ease-in 标准
ease-in
cubic-bezier(0.4, 0, 1, 1)- 用在哪
- 退场的默认值。淡出、收起、消失，交代清楚就走。
- 别用在哪
- 用户主动关闭的弹窗。加速离开会让人觉得是自己点错了。
160ms
ease-in 夸张
expo in
cubic-bezier(0.7, 0, 0.84, 0)- 用在哪
- 「甩出去」。Toast 自动消失、被替换掉的临时提示。
- 别用在哪
- 用户可能后悔的操作。太快消失会来不及看清发生了什么。
200ms
ease-in 圆润
circ in
cubic-bezier(0.32, 0, 0.67, 0)- 用在哪
- 与「ease-out 圆润」配对使用，做一进一出对称的往来动效。
- 别用在哪
- 单独使用。它自身没有明显性格，配不上对就浪费了。
240ms
蓄力再走
back in
cubic-bezier(0.36, 0, 0.66, -0.56)- 用在哪
- 先反向蓄一点力再离开。适合「被吸走」的卡片，方向感强。
- 别用在哪
- 任何用户没预期到会消失的东西。反向位移会被读成「还有动作」。
240ms
位移
7 条元素从 A 到 B。两端都在画面上，首尾的速度必须被观众看见。
ease-in-out 标准
Material standard
cubic-bezier(0.4, 0, 0.2, 1)- 用在哪
- Material 标准曲线。位移类动效的默认答案。
- 别用在哪
- 需要强调「急」的场景——它太平稳，传达不了紧迫。
240ms
ease-in-out 平滑
sine in-out
cubic-bezier(0.45, 0, 0.55, 1)- 用在哪
- 完全对称，首尾速度一致。适合循环、往返、呼吸式的移动。
- 别用在哪
- 单向的一次性位移，它会让起点和终点都显得拖沓。
280ms
ease-in-out 尖锐
sharp
cubic-bezier(0.85, 0, 0.15, 1)- 用在哪
- 两端极缓、中段飞快。适合大跨度位移：跨屏切换、长距离拖动。
- 别用在哪
- 短距离（<100px）位移。中段的突然加速会显得像卡顿。
320ms
ease-in-out 夸张
expo in-out
cubic-bezier(0.83, 0, 0.17, 1)- 用在哪
- 全屏转场、整页切换。够长才撑得住这种戏剧性的速度差。
- 别用在哪
- 小于 300ms 的动效。时间不够，观众只会看到「跳了一下」。
480ms
弹性往返
elastic
cubic-bezier(0.68, -0.6, 0.32, 1.6)- 用在哪
- 位移带弹性。适合可拖拽、可回弹的元素：滑块、卡片回位。
- 别用在哪
- 精确对位的场景。回弹会让用户怀疑没对齐。
400ms
弹簧感
spring
cubic-bezier(0.5, 1.8, 0.5, 0.8)- 用在哪
- 点赞、气泡、确认勾选这类「有情绪」的小动作。
- 别用在哪
- 任何需要严肃或精确的界面。过冲量太大，像玩具。
360ms
磁吸
magnetic
cubic-bezier(0.2, 1.4, 0.4, 1)- 用在哪
- 悬停跟随、拖拽吸附。快速靠近然后「吸住」。
- 别用在哪
- 没有明确目标位置的位移。磁吸的暗示太强，落点不对会很怪。
300ms
数据与文案说明：曲线名称与 cubic-bezier 数值属数学事实；「用在哪 / 别用在哪 / 时长」为本站编辑判断， 可讨论、可推翻。未引入任何第三方动画库。