opacity动画需配合transition或@keyframes才能生效；仅设opacity:0无过渡效果；@keyframes须定义起止关键帧，如0%、50%、100%；transition适合交互显隐，@keyframes适合完整序列；性能上opacity通常GPU加速，慎用will-change。
opacity 动画必须配合 transition 或 @keyframes 才生效
直接写 opacity: 0 不会自动变透明，也不会“渐”——CSS 不会自己插值。要产生过渡效果，得明确告诉浏览器“这个属性要平滑变化”。两种主流方式：transition 适合简单状态切换（比如 hover 显隐），@keyframes 更适合定义完整动画序列（比如淡入→停留→淡出）。
用 @keyframes 写淡入淡出必须定义至少两个关键帧
只写 from { opacity: 0 } 没用，浏览器不知道终点；只写 to { opacity: 1 } 也不行，起点不明确。标准写法是明确起止，或用百分比控制节奏：
@keyframes fadeInOut {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
然后通过 animation 属性挂载：
.box {
animation: fadeInOut 2s ease-in-out infinite;
}
-
2s是整个循环耗时（0%→100%） -
ease-in-out让淡入淡出更自然，避免机械感 -
infinite表示无限循环；去掉它就只播一次
opacity 动画性能差？别乱加 will-change
单纯改 opacity 是 CSS 合成属性，浏览器通常能走 GPU 加速，一般不需要优化。但如果你同时动了 transform 和 opacity，或者在低性能设备上卡顿，可以加：
.box {
will-change: opacity;
}
不过要注意：
-
will-change是提示，不是魔法，滥用反而拖慢渲染 - 不要对大量元素批量加，尤其在滚动区域里
- 动画结束建议用 JS 移除该声明，或用
animationend事件清理
IE 不支持 @keyframes？用 transition + 类名切换更稳妥
IE10+ 支持 @keyframes，但 IE9 及以下完全不认。如果还要兼容老 IE，推荐用 transition 配合 JS 切换类：
.fadeable {
opacity: 1;
transition: opacity 0.3s ease;
}
.fadeable.hidden {
opacity: 0;
}
JS 控制：
element.classList.add('hidden'); // 渐隐
element.classList.remove('hidden'); // 渐显
这种方式兼容性好，逻辑清晰，也方便用 JS 精确控制时机（比如等图片加载完再淡入）。
实际项目中，@keyframes 写法简洁，适合装饰性动效；而 transition + 类控制更适合交互反馈。别为了“酷”堆复杂 keyframes，多数渐隐渐现，一行 transition 就够用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
