最直接的淡入淡出方案是用 opacity 配合 transition 实现，需明确限定 transition 属性、监听图片 load 事件防闪屏、避免与 animation 冲突，并注意硬件加速与兼容性。
用 opacity + transition 实现基础淡入淡出
最直接的方式是控制元素的 opacity 值，并配合 transition 实现平滑变化。注意：opacity: 0 元素仍占据文档流且可响应事件，若需完全“不可见+不可交互”，得额外处理。
常见错误是只写 transition: all 0.3s —— 这会触发所有可动画属性重绘，性能差且易引发意外过渡（比如 color 或 margin 也被动参与）。应明确限定：
img {
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
img.show {
opacity: 1;
}
切换时只需 JS 控制类名：img.classList.add('show') 或 img.classList.toggle('show')。
避免闪屏：图片加载完成后再触发淡入
如果图片还没加载完就执行 opacity: 1，会出现先空白后突显的闪屏。正确做法是监听 load 事件再启动动画：
立即学习“前端免费学习笔记（深入）”；
- 对单张图：
img.addEventListener('load', () => img.classList.add('show')) - 对多张图或不确定是否已缓存的情况，加兜底逻辑：
if (img.complete) img.classList.add('show') - 慎用
visibility: hidden替代opacity: 0—— 它不支持过渡动画，无法实现淡入效果
用 @keyframes 做更精细的淡入节奏控制
当需要非线性缓动（比如先慢后快）、或与其他动画（如位移、缩放）组合时，@keyframes 更可控。例如模拟“渐显+轻微上浮”：
这是一组共4种效果非常炫酷的CSS3移动手机滑动隐藏侧边栏菜单特效。这四种效果分别是：默认的点击滑动侧边栏菜单效果、带3D transforms的滑动侧边栏效果、文字缩放和淡入淡出效果的滑动侧边栏以及使用translate来实现滑动侧边栏的效果
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
img.fade-in-up {
animation: fadeInUp 0.5s ease-out forwards;
}
关键点：
-
forwards确保动画结束后保持to状态，否则会回退到初始opacity: 0 - 不要同时用
transition和animation控制同一属性，容易冲突 - 若需 JS 触发多次动画（如循环轮播），记得先移除类再重新添加，或用
animation-play-state控制
兼容性与性能注意点
opacity 和 transform 是硬件加速属性，在现代浏览器中性能较好；但 filter: opacity()（旧写法）或修改 width/height 会触发重排，应避免。
IE10+ 支持 opacity，IE9 需用 filter: alpha(opacity=0)（已基本可忽略）；Safari 旧版本对 transition 在 img 上的支持不稳定，建议统一用父容器包裹并动画该容器。
移动端要注意：will-change: opacity 在复杂列表中可能提升性能，但滥用会增加内存开销，仅在滚动区域中频繁进出视口的图片上考虑添加。
