opacity动画卡顿主因是未用will-change提示浏览器优化，应添加will-change: opacity或transform: translateZ(0)触发硬件加速，并配合cubic-bezier(0.25,0.46,0.45,0.94)缓动函数，避免与overflow:hidden冲突及JS类切换时机错误。
opacity 动画卡顿是因为没加 will-change
直接用 @keyframes 改 opacity 本身没问题，但浏览器默认不为透明度变化做图层提升，动画过程中可能触发重排或低效合成，尤其在中低端设备上容易出现掉帧。关键不是时间设多长，而是告诉浏览器“这个属性即将频繁变化”。
- 给要动画的元素加
will-change: opacity（仅动画前/中设置，动画结束建议移除） - 更稳妥的做法是搭配
transform: translateZ(0)或transform: scale(1)强制硬件加速，兼容性更好 - 避免同时对
opacity和top/left等触发重排的属性做动画
animation-timing-function 选错会让淡入淡出“感觉不平滑”
很多人用 ease 或默认值，但淡入淡出最自然的是 cubic-bezier(0.25, 0.46, 0.45, 0.94)（即 ease-in-out 的优化版），它在起始和结束阶段保留轻微加速度，避免机械感停顿。
@keyframes fadeInOut {
0% { opacity: 0; }
100% { opacity: 1; }
}
.smooth-fade {
animation: fadeInOut 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
opacity 动画被父容器 overflow: hidden 截断
淡出时如果元素刚好在父容器边缘，opacity: 0 不代表“不可见区域不占位”，但若父级有 overflow: hidden，且子元素使用了 transform（比如为了提层），可能因层叠上下文变化导致裁剪异常，看起来像闪烁或提前消失。
- 检查父容器是否意外设置了
overflow: hidden - 避免在同一个元素上同时用
opacity动画和transform位移（除非你明确需要） - 如需隐藏后彻底释放空间，动画结束后手动加
display: none，别只靠opacity: 0
JS 控制淡入淡出时 class 切换时机不对
用 JS 切换 fade-in / fade-out 类时，如果两个类都定义了 opacity 和 animation，但没控制好触发顺序，会出现“先闪一下再淡出”或“淡出未完成就淡入”的撕裂感。
立即学习“前端免费学习笔记（深入）”；
- 淡出：先加
fade-out类 → 监听animationend事件 → 移除元素或加display: none - 淡入：确保元素已插入 DOM 且
display不为none后，再加fade-in类 - 不要用
setTimeout模拟动画时长，优先用事件监听
真正影响平滑度的，往往不是 keyframes 写得够不够细，而是图层策略、timing function 选择、以及 DOM 生命周期配合是否严密。尤其在移动端，少一次重排，就少一次掉帧风险。
