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 或最后一帧的状态：
立即学习“前端免费学习笔记（深入）”；
