纯CSS淡入淡出最简方案是opacity+transition，通过class切换触发，需声明transition: opacity 0.3s ease且初始隐藏用opacity: 0与visibility: hidden配合。
用 opacity + transition 实现淡入淡出最直接
不需要 JavaScript，纯 CSS 就能搞定基础淡入淡出。核心是控制 opacity（取值 0–1），配合 transition 声明过渡行为。关键点不是“怎么写”，而是“什么时候触发”——通常靠 class 切换来驱动，比如鼠标悬停或点击后添加/移除 fade-in 类。
常见错误：直接在初始状态设 opacity: 0 但没加 transition，结果切换时是瞬时显隐；或者忘了加 transition 的属性名（必须写 opacity，不能只写 all，否则可能意外触发其他属性动画）。
-
opacity是可动画的 CSS 属性，IE9+ 支持，无兼容风险 - 过渡声明推荐写全：
transition: opacity 0.3s ease;，避免用all - 初始隐藏建议用
opacity: 0; visibility: hidden;组合，防止透明但占位、可点击 - 显示时仅需
opacity: 1; visibility: visible;，visibility确保交互可用
animate() 和 @keyframes 适合复杂节奏控制
如果需要非线性淡入（比如先慢后快）、或叠加其他动画（如淡入同时轻微上移），就得用 CSS 动画帧。此时 opacity 只是其中一帧属性，由 @keyframes 定义起止，再用 animation 应用。
注意：CSS 动画默认不触发重排，性能比 JS 操作好，但一旦设了 animation-fill-mode: forwards，结束帧会保留 opacity: 1，后续想再淡出就得手动覆盖或重新触发动画。
立即学习“前端免费学习笔记（深入）”；
- 定义动画：
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } - 应用动画：
animation: fadeIn 0.4s ease-out forwards; - 重复播放用
animation-iteration-count: infinite;，但慎用于淡入淡出，易干扰用户 - 想暂停/重启动画？得用 JS 控制
animation-play-state或切换 class
JS 控制淡入淡出要避开 display: none 的坑
用 JavaScript 触发淡入淡出时，最常错的是在动画开始前就设 display: none——这会让元素立刻从布局中消失，opacity 过渡根本没机会执行。正确做法是先确保元素可见（display: block 等），再改 opacity；隐藏完成后再设 display: none。
另一个典型问题：多个元素批量淡入时，用 for 循环同步设置 opacity，结果所有元素同一帧开始动画，失去 stagger 效果。真要逐个延迟，得用 setTimeout 或 Promise 链，或直接用 CSS 的 animation-delay。
- 安全隐藏流程：
element.style.opacity = '0';→ 等待transitionend事件 →element.style.display = 'none'; - 淡入前确保：
element.style.display = 'block'; element.style.opacity = '0';→ 再设opacity: 1 - 监听事件用
element.addEventListener('transitionend', handler)，注意判断event.propertyName === 'opacity'
移动端要注意 opacity 动画的渲染表现
在 iOS Safari 和部分安卓 WebView 中，单纯靠 opacity 做过渡，偶尔会出现闪烁或掉帧，尤其在快速连续触发时。这不是 bug，而是浏览器对透明度变化的合成策略导致的。解决办法很实际：给元素加 transform: translateZ(0) 或 will-change: opacity，强制启用硬件加速。
但别滥用 will-change——它会提前分配图层资源，太多元素同时设反而拖慢性能。只加在真正需要频繁淡入淡出的容器上，且动画结束后最好清除（JS 中设回 auto）。
- 推荐写法：
will-change: opacity;或transform: translateZ(0); - 慎用
backface-visibility: hidden，它对opacity无实质帮助，还可能引发其他渲染异常 - 测试时务必在真机上验证，模拟器常掩盖渲染问题
opacity 变化，如果内容靠淡入才出现，得同步用 aria-hidden 控制语义可见性，否则视障用户可能读到“空内容”。 
