opacity动画需配合transition或@keyframes才能生效；transition适用于交互触发的渐变，须写在起始状态并推荐全写三值；@keyframes需定义关键帧并加forwards防止回跳；性能上transform更稳定。
opacity 动画必须配合 transition 或 @keyframes 才能生效
直接写 opacity: 0; 不会自动变透明，CSS 属性本身是静态的。要产生渐变效果，得明确告诉浏览器“什么时候开始变”“怎么变”“变多久”。常见做法有两种：用 transition 做状态切换（比如 hover、class 切换），或用 @keyframes 定义完整时间轴动画。
用 transition 实现点击/悬停时的透明度渐变
适合交互触发的场景，比如按钮悬停显示提示框、菜单展开时淡入。关键点在于：目标元素初始要有 opacity 值，且必须声明 transition，否则变化是瞬时的。
-
transition必须写在「起始状态」上，不是 hover 里 —— 否则 hover 进去有动画，离开时没动画 - 推荐写全三项：
transition: opacity 0.3s ease-in-out;，避免只写transition: opacity 0.3s;（部分旧浏览器不识别简写） - 别忘了加
will-change: opacity;（可选），对频繁触发动画的元素能减少重绘开销
button {
opacity: 0.6;
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
button:hover {
opacity: 1;
}
@keyframes 中 opacity 从 0 到 1 的写法细节
适用于需要自动播放、循环、或更复杂时序控制的动画，比如页面加载时的入场效果。注意几个容易出错的地方：
- 必须用
from/to或百分比定义关键帧，不能只写opacity: 1;在@keyframes里 —— 那样没有起止点 -
animation-fill-mode: forwards;很关键：否则动画播完会跳回初始opacity值（比如从 0 开始，播完又闪回 0） - 不要给同一元素同时设
transition和animation控制opacity，可能冲突导致闪烁或卡顿
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 0.4s ease-out forwards;
}
opacity 动画性能差？其实是 transform 更稳
虽然 opacity 是 CSS 动画中少数能硬件加速的属性之一，但实际中仍可能在低端设备上掉帧。真正零成本的是 transform（如 scale、translate），而 opacity 在某些安卓 WebView 或旧版 Safari 下仍会触发重绘。
立即学习“前端免费学习笔记（深入）”；
- 如果只是想“让元素看起来淡入”，且不需要精确控制透明度数值，可用
transform: scale(0.98);+opacity: 0.01;起始，再过渡到scale(1)+opacity: 1;—— 视觉几乎无差别，但更稳 - 避免在
opacity动画期间同时修改height或margin，这会强制触发 layout，拖慢整个动画 - 移动端慎用
animation-iteration-count: infinite配合opacity，长时间运行可能积累渲染压力
opacity 就能淡入，其实漏掉了触发机制和收尾控制；forwards 和 transition 的位置，恰恰是最常被忽略的两个地方。 
