opacity动画必须用0和1等数值，禁用0%或字符串；需加animation-fill-mode:forwards保持终态；配合will-change:opacity提升性能；简单显隐优先用transition。
opacity 动画必须用 0 和 1，不能用 0% 或字符串
CSS 动画中 opacity 是数值型属性，合法取值范围是 0 到 1（含小数）。常见错误是写成 opacity: 0% 或 opacity: "0"，这会导致关键帧失效，动画卡在初始状态。
正确写法只接受数字：
@keyframes fade {
from { opacity: 1; }
to { opacity: 0; }
}
-
opacity: 0✅ 合法，完全透明 -
opacity: 0.3✅ 合法，30% 不透明 -
opacity: 0%❌ 无效，浏览器忽略该声明 -
opacity: "0"❌ 语法错误，字符串不被解析
animation-fill-mode: forwards 才能保持最终透明度
默认情况下，动画播放完会“回退”到元素原始样式。比如一个原本 opacity: 1 的元素执行了 fade-out 动画，结束后会突然闪回不透明——这不是渐隐，是假隐。
解决方法是加 animation-fill-mode: forwards，让动画停在 to 或最后一帧的状态：
立即学习“前端免费学习笔记（深入）”；
.box {
animation: fade 0.3s ease-in-out;
animation-fill-mode: forwards;
}
- 没加
forwards：动画结束瞬间恢复原始opacity - 加了
forwards：结束时保持opacity: 0，视觉上真正“消失” - 若需反复切换，建议用
animation-direction: alternate配合infinite，而非依赖 fill-mode
opacity 动画要搭配 will-change 提升性能
频繁修改 opacity 本身开销不大，但若元素还参与其他渲染（比如有阴影、滤镜或复杂子树），浏览器可能不会自动启用合成层，导致掉帧。
显式告诉浏览器“这个元素的透明度会变”，能提前创建独立图层：
.fading-element {
will-change: opacity;
}
- 仅在需要动画的元素上设置，避免滥用（
will-change有内存和管理成本） - 动画开始前加，结束可选移除（用 JS 控制更精准）
- 不加也可能正常，但在低端设备或密集动画场景下，卡顿会更明显
transition 比 @keyframes 更适合简单渐隐渐显
如果只是 hover 显隐、点击切换这类单次状态变化，用 transition 更轻量、更可控，不需要定义 keyframes：
.toggle {
opacity: 1;
transition: opacity 0.25s ease;
}
.toggle.hidden {
opacity: 0;
}
-
transition自动补间，代码量少，逻辑直白 - 支持反向过渡：从
hidden移除 class 时，自动从 0→1 渐显 -
@keyframes更适合循环、多段、或需精确控制中间帧的场景（如淡入→暂停→淡出）
真正容易被忽略的是：opacity 动画是否触发重排（reflow）。答案是不触发——它只影响绘制层，但前提是别在动画过程中同时改 width、height 或 display，否则合成优化就失效了。
