如何通过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。