图片渐显动画需初始 opacity: 0 并内联关键样式防 FOUC，用 IntersectionObserver 替代 onload 触发，加 transform: translateZ(0) 启用硬件加速，避免与 layout 属性混用。
用 @keyframes + opacity 实现图片渐显动画
直接给图片加 opacity 动画是可行的，但必须确保初始状态为 opacity: 0，且动画触发前不被其他样式覆盖。常见错误是图片加载完成时已显示（opacity: 1），导致动画“看不见”。
- 动画定义要包含
from（0%）到to（100%）的完整过渡，不能只写to - 必须配合
animation属性（或其子属性如animation-name、animation-duration）才能生效 - 若图片通过
img标签插入，需注意浏览器默认会同步渲染——得用 JS 控制时机，或用loading="lazy"配合IntersectionObserver触发
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in-img {
opacity: 0;
animation: fadeIn 0.6s ease-out forwards;
}
为什么图片一刷新就闪一下再渐显？
这是典型的“FOUC（Flash of Unstyled Content）”：CSS 加载慢于 HTML 渲染，或图片未等样式就已显示。关键点在于：opacity: 0 必须在图片渲染前就生效。
- 不要依赖外部 CSS 文件延迟加载；把关键动画样式内联在
中 - 避免在
img上直接写style="opacity: 0;"，因为内联样式优先级高，但 JS 操作时易冲突 - 更稳妥的做法是：初始用
visibility: hidden或display: none隐藏图片，等 JS 确认可动画时再切到opacity: 0并触发动画
用 img 的 onload 触发渐显是否可靠？
不可靠。因为 onload 只保证图片资源加载完成，不保证 CSS 动画样式已就绪，也不处理缓存图片瞬间渲染的问题。
- 缓存图片可能在
onload前就已渲染，导致opacity: 0来不及应用 - 推荐改用
IntersectionObserver监听图片进入视口，再添加动画 class - 若必须用
onload，请先设img.style.opacity = '0'，再在回调里加 class，且加setTimeout(..., 0)让样式重排生效
const img = document.querySelector('.fade-in-img');
img.style.opacity = '0';
img.onload = () => {
setTimeout(() => {
img.classList.add('animate');
}, 0);
};
opacity 动画卡顿或闪烁怎么办？
主要因浏览器未启用硬件加速，或与其他重绘属性（如 width、margin）混用导致频繁 layout。
立即学习“前端免费学习笔记（深入）”；
- 强制开启 GPU 加速：加
transform: translateZ(0)或will-change: opacity - 避免同时动画
opacity和height/display—— 后者会触发 layout，阻塞合成器 - 移动端 Safari 对
opacity动画有兼容性问题，建议加-webkit-animation前缀 - 如果图片是背景图（
background-image），不能直接对伪元素做opacity动画，得用background+opacity分层容器
@keyframes 更容易被忽略。 
