CSS中opacity动画“不连续”主因是渲染机制或属性混用，非opacity本身问题；应避免display与opacity混用、启用合成层、用linear缓动、≥300ms时长、animation-fill-mode:forwards保持终态。
CSS 中用 @keyframes 配合 opacity 做透明度动画时出现“不连续”，通常不是动画本身断开，而是视觉上卡顿、跳变或闪烁。根本原因往往出在渲染机制、属性选择或触发条件上，而非 opacity 不支持动画——它其实是 CSS 中最稳定、硬件加速友好的可动画属性之一。
确保 opacity 动画被 GPU 加速
虽然 opacity 本身天然支持合成层提升，但若元素处于复杂的重排/重绘上下文中（比如父容器频繁 layout），仍可能掉帧。建议显式启用合成层：
- 给动画元素添加
transform: translateZ(0)或will-change: opacity - 避免同时对
width、height、top等触发布局的属性做动画 - 不要在
:hover或点击事件中直接写内联style.opacity，优先用 class 切换触发动画
使用线性缓动 + 合理时间函数
默认 ease 缓动在起止处速度变化明显，小时间段内易感知“停顿感”。对纯透明度过渡，推荐更均匀的节奏：
- 用
animation-timing-function: linear获得匀速渐变 - 若需自然感，可用
cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似ease-in-out但更平滑） - 动画时长建议 ≥ 300ms，低于 200ms 容易因帧率不足显得跳跃
避免 opacity 与 display 混用
这是最常见的“不连续”根源：在 @keyframes 中只控制 opacity，却在动画结束时用 JS 或媒体查询直接设 display: none。这会导致元素瞬间消失，破坏动画连贯性。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确做法：用
opacity: 0+visibility: hidden（保留布局）或配合transition延迟隐藏 - ❌ 错误做法：
@keyframes fadeOut { to { opacity: 0; } }+ JS 监听animationend立即el.style.display = 'none' - 进阶技巧：用
animation-fill-mode: forwards保持最终状态，再结合pointer-events: none防交互干扰
检查是否被其他样式覆盖或重置
动画过程中 opacity 被更高优先级规则（如内联样式、!important、JS 强制重写）打断，会导致突变：
- 用浏览器开发者工具的“Animations”面板实时查看 opacity 实际变化曲线
- 检查是否有 CSS 伪类（如
:hover）在动画期间意外生效并覆盖 opacity - 避免在 keyframes 中写
opacity: initial或unset，应明确指定数值（0 或 1）
不复杂但容易忽略。把 opacity 当作“纯视觉通道”来用，远离 layout 和 paint 触发器，动画自然顺滑。
