用 opacity + transition 实现图片透明度动画最稳妥，需显式声明 transition、避免父容器设 opacity、禁用 filter: opacity() 混用，并针对 safari 加 will-change 和 z-index 控制交叉渐变；背景图透明度须用渐变层位移模拟。
直接用 opacity + transition 就能实现平滑动画，但必须避开继承污染和 Safari 的渲染陷阱。
用 opacity 做图片透明度动画最稳妥
这是唯一能被所有现代浏览器原生支持、且硬件加速良好的方式。关键不是“能不能动”，而是“怎么动不翻车”：
-
opacity只接受 0–1 的小数，不能写成50%（那是filter: opacity()的语法） - 必须显式声明
transition: opacity 0.4s ease，否则变化是硬切 - 如果图片是
<img>标签，它没有子元素，所以opacity不会误伤文字——这点比伪元素方案干净得多 - 别给父容器设
opacity，否则整个盒子连带文字一起变淡，这不是“图片动画”，是“视觉降级”
filter: opacity() 和 opacity 别混用
两者行为不同，混用会导致 Chrome/Safari 渲染不一致，甚至动画卡顿：
-
opacity: 0.6→ 影响层叠上下文，触发 GPU 合成，动画顺滑 -
filter: opacity(60%)→ 属于滤镜管线，某些 iOS 版本会禁用硬件加速，滚动时掉帧 - 二者不可叠加生效：设了
opacity: 0.5再加filter: opacity(80%)，最终不是 0.4，而是按浏览器实现各自取舍，结果不可控 - 只在需要链式滤镜（比如同时加
blur(2px)和透明）时才用filter，单调透明度请坚持opacity
两张图交叉渐变动画要防闪烁
常见做法是叠两层 <img>，靠 opacity 切换，但容易在 Safari 出现一帧白屏或闪跳：
- 必须给容器加
will-change: opacity，提前告诉浏览器这个属性会变（尤其 iOS 17+） - 两张图都设
position: absolute，且初始z-index明确（比如.img1 { z-index: 1; },.img2 { z-index: 2; }），避免渲染顺序抖动 - 动画触发时，先让后图
opacity从 0→1，再等transitionend后把前图opacity设为 0 —— 不能靠 CSS 同时反向过渡，Safari 对反向 opacity 过渡有竞态 bug - 别用
visibility: hidden配合opacity切换：visibility会触发重排，打断合成层，动画直接卡住
背景图透明度动画只能靠渐变层位移
如果你的“图片”其实是某个 div 的 background-image，那 opacity 对它无效（背景图不是独立元素）。此时唯一可靠路径是：
- 用
background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(...)，把透明层和图叠在一起 - 想“动画透明度”，实际是动画
background-position，配合background-size: 200% 200%提供移动空间 - 绝对不要写
background: linear-gradient(...) 0% 0%, url(...) 0% 0%—— 多层 background 的 position 必须用逗号分隔，且顺序严格对应图层顺序 - 移动端注意：iOS Safari 对小数
background-size（如199.5%）渲染异常，统一用整数
真正难的不是写出来，而是 Safari 下动画第一帧是否撕裂、iOS 滚动时是否掉帧、以及两张图切换时有没有那一帧白光——这些细节没压住，用户看到的就是“卡”和“闪”，而不是“渐变”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
