如何通过CSS transition属性实现元素的流畅过渡效果？

本文共计900个文字，预计阅读时间需要4分钟。

必须写在要变动的元素本质上，不是父容器，也不是。

常见错误是把 transition 写在触发状态（如 :hover）里，结果只有进入有动画、离开立刻跳变——正确做法是写在默认状态中：

button { background: #007bff; transition: background-color 0.3s ease; /* ✅ 这里定义 */ } button:hover { background-color: #0056b3; /* ❌ 不在这里写 transition */ }

哪些 CSS 属性支持 transition

不是所有属性都能过渡。只有「可计算、有中间值」的属性才行，比如 opacity、transform、color、width（但注意：从 auto 变化不生效）、background-color。

以下属性通常不支持或效果不可靠：

立即学习“前端免费学习笔记（深入）”；

• display（none ↔ block 无法插值，改用 visibility + opacity）
• height / width 从 auto 开始（浏览器无法算出起始数值）
• font-size 用 rem 或 em 时若根字体动态变化，可能意外中断过渡

最稳妥的组合是 transform + opacity：它们触发硬件加速，且无布局影响。

transition-timing-function 怎么选才自然

ease 是默认值，但多数时候它“开头慢、中间快、结尾又慢”，并不符合人眼对真实运动的预期。真正顺滑的交互往往用：

• cubic-bezier(0.25, 0.46, 0.45, 0.94)（即 ease-in-out 的增强版，常用于 Material Design）
• ease-out：适合收尾强调（如菜单关闭、弹窗退出）
• steps(4, end)：做逐帧动画（如加载指示器、翻页效果），不是平滑过渡，但属于 transition-timing-function 的合法值

避免滥用 linear——机械匀速反而显得僵硬，尤其在小范围变化（如 2px 位移）时特别明显。

transition-delay 和触发时机的陷阱

transition-delay 看似简单，但容易和 JS 操作冲突。比如用 JS 动态加 class 触发过渡，如果 class 添加后立即修改样式，浏览器可能合并渲染，导致 delay 失效。

更隐蔽的问题是：当多个属性同时过渡，但设置了不同 delay 或 duration，离开时容易出现“错层”——比如背景色已恢复，边框阴影还在动。此时建议：

• 统一用 transition-property: all 要谨慎，最好显式列出关键属性（如 transition: opacity 0.2s, transform 0.25s）
• 需要精确同步时，用 transform 替代 top/left，因为后者触发布局重排，延迟更难控制
• 移动端要注意 :active 状态持续时间极短（约 10ms），transition-delay 大于这个值就根本看不到效果

真正难调的从来不是怎么写 transition，而是搞清「哪一帧开始算过渡起点」——CSS 动画的起点永远是样式计算完成后的下一帧，而 JS 改样式是否触发了重排、是否被浏览器优化掉，都会悄悄改变这个起点。