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 的写法细节
适用于需要自动播放、循环、或更复杂时序控制的动画，比如页面加载时的入场效果。注意几个容易出错的地方：
