opacity动画卡顿或突兀的常见原因包括：线性过渡缺乏自然节奏、重排强制同步触发layout、未用cubic-bezier精调曲线、未启用硬件加速、混用display:none、父容器overflow:hidden或filter截断合成。
opacity 动画卡顿或突兀的常见原因
直接对 opacity 做线性动画（ease 或 linear）容易显得生硬，尤其在快速淡入/淡出时——人眼对亮度变化敏感，线性过渡缺乏“启动缓、结束稳”的自然节奏。更关键的是，如果元素还参与了重排（如同时改 height 或 display），浏览器会强制同步触发 layout，进一步破坏动画流畅性。
用 cubic-bezier() 精调 opacity 过渡曲线
比预设的 ease、ease-in-out 更可控：用 cubic-bezier(x1, y1, x2, y2) 明确定义贝塞尔控制点。淡入推荐缓启（低初速度），淡出推荐缓停（低末速度）：
- 柔和淡入：
transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);（类似ease-in但更平滑） - 自然淡出：
transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);（收尾减速明显） - 全程柔和（常用）：
transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);（轻微过冲，观感更灵动）
避免用 ease-in 单独做淡出——开头太快，像“啪”一下消失。
必须配合 will-change 和 transform 触发硬件加速
仅靠 opacity 动画本身不触发 GPU 加速；但加上 will-change: opacity 或搭配一个无意义的 transform: translateZ(0)，能强制浏览器将其提升为独立图层，大幅减少卡顿：
立即学习“前端免费学习笔记（深入）”；
button:hover {
opacity: 0.7;
transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
will-change: opacity;
}
注意：will-change 不要滥用——只加在真正会动画的元素上，且动画结束后可考虑用 JS 移除，避免长期占用内存。
别在 opacity 动画中混用 display: none
display: none 是立即生效的，会中断正在运行的 opacity 过渡。正确做法是监听 transitionend 事件再设 display，或改用 visibility: hidden 配合 opacity：
.fade-out {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}
否则你会看到“先闪一下再淡”，或者动画直接跳到终点。
最易被忽略的一点：opacity 动画是否被父容器的 overflow: hidden 或 filter 截断——这些属性会让子元素的透明度合成失效，导致过渡帧丢失。检查渲染层，必要时给父级加 transform: translateZ(0) 强制重建合成层。
