什么导致 CSS 透明度变化不平滑？
渲染、重绘与硬件加速的关系
在网页交互中，opacity 的过渡是最常用的视觉效果之一，但有时却不平滑。本文聚焦于问题：CSS透明度变化不平滑怎么办？用 transition-opacity 搭配 linear/ease 实现顺滑过渡，帮助你理解背后的机制。
造成不平滑的根本原因往往涉及浏览器的渲染阶段。浏览器渲染管线的瓶颈、父/子元素的排版与重绘、以及硬件加速是否有效触发合成层都会直接影响帧率和过渡的平滑度。
如果在过渡中同时修改了 display、width、height 等非 opacity 的属性，会引发 重排（reflow），从而导致过渡出现抖动或卡顿。
transition-opacity 的基础用法与原理
核心原理与原生 CSS 的对应关系
transition-opacity 在一些框架中以类名形式出现，实质对应的是 transition: opacity 的设置。核心点是为 opacity 属性设定过渡的时间和曲线，从而让透明度的变化变得连贯。
在原生 CSS 中，常见的写法是 transition: opacity 0.5s linear 或 transition: opacity 0.5s ease，通过切换类名或直接修改样式来驱动 opacity 的变化。注意目标并不需要改变布局属性，否则会打断过渡。
/* 原生 CSS 方式 */
.box { opacity: 0; transition: opacity 0.5s linear; }
.box.show { opacity: 1; }
通过上述方式，opacity 的变化速度与曲线由 CSS 控制，而不是逐步由 JavaScript 逐帧更新，从而降低实现复杂度并提升可维护性。
如何结合 linear/ease 实现顺滑过渡
线性与缓动的区别与使用场景
线性 (linear) 的过渡速度是恒定的，适合需要<均匀变化的场景，例如进度条的平滑推进。ease 在开始和结束处有加速和减速，视觉上更自然，常用于淡入淡出和渐显的效果。
在实际项目中，往往需要对比多种 timing-function，选择最合适的过渡曲线。下面给出常见组合的示例，帮助你快速直观看到差异。
/* 线性过渡 */
.transition-linear { transition: opacity 0.5s linear; }/* 缓动过渡 */
.transition-ease { transition: opacity 0.5s ease; }/* 顶级示例：通过 CSS 变量便于统一调参 */
.box { opacity: 0.0; transition: opacity var(--t) linear; }
.box.show { opacity: 1.0; }在实际使用中，根据场景选择 linear 还是 ease，以及根据需要调整时长，能显著提升过渡的顺滑度。
解决 CSS 透明度变化不平滑的实用做法
从渲染层和结构层面下手
为提升顺滑度，可以优先考虑让浏览器承担多一层的工作，开启硬件加速是常见且有效的做法。通过 will-change: opacity 或 transform: translateZ(0)，可以促使元素进入独立的合成层，降低重绘成本。
此外，尽量避免在过渡时改变布局相关属性，避免触发 重排。如果必须改变布局，请考虑把过渡聚焦在 opacity 上，并把其他属性的变化放到触发之外进行处理。
为了控制交互与可访问性，在 opacity 变为 0 时，可以使用 visibility: hidden 或 pointer-events: none 来确保不可见状态下不会有误触发的交互。
/* 使用 CSS 变量控制时长并提升可维护性 */
:root { --fade-duration: 0.4s; }
.box { opacity: 0; transition: opacity var(--fade-duration) ease; will-change: opacity; }
.box.show { opacity: 1; }/* 合成层优化和 GPU 加速的组合示例 */
.box { transform: translateZ(0); backface-visibility: hidden; opacity: 0; transition: opacity 0.4s ease; }
.box.show { opacity: 1; }/* 使用可见性控制避免交互问题 */
.box { opacity: 0; visibility: hidden; transition: opacity 0.4s ease; }
.box.show { opacity: 1; visibility: visible; }示例：一个可复用的 CSS 过渡组件
HTML/CSS 组合示例
下面给出一个可复用的 CSS 过渡组件，专注于 opacity 的平滑过渡，并兼容现代浏览器。通过 CSS 变量控制时长、通过 will-change 提示浏览器优化，同时将过渡限制在 opacity 属性上。
:root { --fade-duration: 0.4s; }/* fade 组件 */
.fade { opacity: 0; transition: opacity var(--fade-duration) ease; will-change: opacity; }
.fade.in { opacity: 1; }
该组件的核心在于：通过 CSS 变量设定时长、通过 will-change 提示浏览器优化、并将过渡严格限制在 opacity，从而实现稳定的顺滑过渡效果。
