opacity动画需配合transition或animation才生效，直接设opacity:0不会自动淡入；漏写forwards会导致动画后闪回；避免与触发重排的属性混用以防卡顿；ie9-11需filter兜底或js实现；淡入后点击失效常因pointer-events未控制。
opacity 动画必须搭配 transition 或 animation 才生效
直接写 opacity: 0 不会自动淡入，CSS 不会“猜”你想动起来。得明确告诉浏览器：这个属性要过渡、何时开始、持续多久。
- 用
transition适合手动触发（比如 hover、JS 控制类名）：.box { opacity: 0; transition: opacity 0.3s ease-in; }<br>.box.show { opacity: 1; } - 用
@keyframes+animation适合自动播放（如页面加载时）：@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }<br>.box { animation: fadeIn 0.3s ease-in forwards; } - 漏写
forwards是高频坑：动画播完会闪回opacity: 0，因为默认恢复初始状态
opacity 动画卡顿？检查是否触发了重排（reflow）
opacity 本身是可被 GPU 加速的属性，但一旦和 top、left、width 等触发 layout 的属性混用，浏览器可能降级到 CPU 渲染，导致掉帧。
- 只靠
opacity做淡入，基本不会卡；加了transform: translateY(10px)也安全 - 但若同时改
height或margin，就可能强制重排，尤其在低端安卓 WebView 里明显 - 用 Chrome DevTools 的 Rendering 面板勾选 “Paint flashing”，能直观看到哪些区域在频繁重绘
IE 9–11 下 opacity 动画失效？别忘了 filter 兜底
IE 9–11 支持 opacity，但不支持 transition 和 @keyframes（IE10+ 支持部分 @keyframes，但兼容性极差）。纯靠 CSS 淡入，在老 IE 里大概率静止不动。
- 如果必须兼容 IE9+，建议用 JS 控制（如
element.style.opacity = 0.1循环递增），或引入filter: alpha(opacity=0)并配合 JS 动画 - 现代项目中，更推荐直接放弃 IE，或用
animation+@supports (animation: none)做特性检测 - 注意：
filter: alpha()和opacity数值不等价（alpha 是 0–100，opacity 是 0–1），混用易出错
为什么元素淡入后点击不了？可能是 visibility 或 pointer-events 干扰
淡入动画播完，元素看着在，但点不动——大概率不是 opacity 的问题，而是它“透明但依然挡事件”。或者你误用了 visibility: hidden，它和 opacity: 0 行为不同。
-
opacity: 0元素仍占据空间、响应鼠标事件（除非加pointer-events: none） -
visibility: hidden元素不可见、不响应事件、仍占布局空间 -
display: none完全移出渲染树，动画无法作用于它——所以别想对display做 transition - 如果淡入后需要禁用交互，建议在动画结束时用 JS 加
pointer-events: none，而不是靠透明“假装不可点”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
