首选 ease-out，因其原生支持“先快后慢”效果，对应 cubic-bezier(0,0,0.58,1)，天然适配按钮反馈、菜单收起等场景，且兼容所有现代浏览器；须搭配 transform 和 opacity 等 GPU 加速属性使用。
直接用 ease-out 就行，这是最简单、最可靠的方式。 它专为“先快后慢”设计，浏览器原生支持，无需计算贝塞尔值，也不存在兼容性问题。
为什么 ease-out 是首选
它对应的是标准三次贝塞尔曲线 cubic-bezier(0, 0, 0.58, 1)，起始斜率最大（最快），终点斜率为 0（完全停下），天然符合“快速启动 + 渐缓收尾”的交互直觉。比如按钮点击反馈、下拉菜单收起、卡片折叠等场景，用户会觉得动作干脆不拖沓。
- 比
ease更强调收尾控制——ease是“慢-快-慢”，中间有加速段，不够利落 - 比手动写
cubic-bezier()更安全——少输一个数字就可能变成反直觉的抖动或卡顿 - 所有现代浏览器（包括 Safari 12.1+、Chrome 4+、Firefox 16+）都完整支持，无 polyfill 需求
别误用 ease-in 或 ease-in-out
这两个常被新手混淆：ease-in 是“慢-快”，适合淡入类动作；ease-in-out 是“慢-快-慢”，两端都有缓冲，不适合你想要的“先快后慢”。如果用了它们，动画会显得犹豫、不果断，尤其在状态收束（如关闭弹窗、收起面板）时，用户会感觉“没关干净”。
- 错误示例：
transition: transform 0.3s ease-in;→ 入口迟滞，破坏响应感 - 更隐蔽的坑：
transition: all 0.3s ease-in-out;→ 所有属性都被两端缓冲，连opacity都延迟消失
配合 transform 和 opacity 才真正平滑
只设对缓动函数还不够。如果过渡的是 width、height 或 left 这类触发布局重排（reflow）的属性，即使用了 ease-out，动画也会掉帧、卡顿。必须把动画逻辑落在 GPU 可加速的属性上：
立即学习“前端免费学习笔记（深入）”；
- 用
transform: translateX()替代left - 用
transform: scale()替代width/height - 用
opacity控制显隐，而非visibility单独切换（后者无过渡） - 完整写法示例：
transition: transform 0.25s ease-out, opacity 0.25s ease-out;
延迟触发时小心 transition-delay 的负值
有时为了“动画从中间开始”，会尝试用负延迟（如 transition-delay: -0.1s）。这在 ease-out 下极易出问题：因为曲线前半段速度高，负延迟会让动画跳过最敏感的启动阶段，导致视觉上像“突然闪现”，失去“先快”的意图。真要实现偏移播放，优先考虑 @keyframes + animation，而不是硬调 transition-delay。
真正需要关注的，是 ease-out 和硬件加速属性的绑定是否牢固——这点漏了，再准的曲线也白搭。
