css过渡如何实现元素的平滑变化_使用transition属性控制元素过渡-css教程

transition必须写在要变化的元素本身上，如button而非父容器或伪元素；仅支持可计算、有中间值的属性（如opacity、transform）；timing-function推荐cubic-bezier(0.25,0.46,0.45,0.94)等自然曲线。

transition 该写在哪个元素上才生效

必须写在要变化的元素本身上，不是父容器，也不是伪元素（除非你明确想控制伪元素的过渡）。比如想让按钮背景色 hover 时平滑变色，transition 得加在 button 选择器里，而不是 .btn-container。

常见错误是把 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：它们触发硬件加速，且无布局影响。