使用CSS opacity与@keyframes可实现图片透明度平滑变化，如淡入淡出动画。通过设置opacity的0到1值控制透明度，结合@keyframes定义0%、50%、100%关键帧实现从透明到完全显示再消失的效果，并用animation属性将动画绑定到图片，设定持续时间、速度曲线和无限循环，最终实现高性能的视觉过渡效果。
想让图片的透明度平滑变化，比如从完全可见到慢慢消失再出现，可以用CSS中的 opacity 属性配合 @keyframes 来实现。这种方法不依赖JavaScript，性能好，适合做淡入淡出、轮播图过渡等视觉效果。
1. opacity 属性控制透明度
opacity 的取值范围是 0 到 1：
- 0 表示完全透明（看不见）
- 1 表示完全不透明（完全可见）
- 0.5 就是半透明
它可以直接用在图片上，例如：
img {
opacity: 0.3;
}
2. 使用 @keyframes 定义动画关键帧
@keyframes 用来描述动画过程中某个时间点的样式状态。你可以设定多个阶段，比如开始、中间、结束。
立即学习“前端免费学习笔记（深入）”；
下面是一个从透明到不透明再回到透明的渐变动画：
@keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
这个动画表示：图片从“看不见”变到“完全显示”，再慢慢“消失”。
3. 将动画应用到图片元素
写好关键帧后，用 animation 属性把动画绑定到图片上：
img {
animation: fade 3s ease-in-out infinite;
}
这段代码的含义是：
- fade：使用的动画名称（对应 @keyframes fade）
- 3s：动画持续3秒
- ease-in-out：速度曲线，开始和结束慢，中间快
- infinite：无限循环播放
4. 完整示例代码
把上面的部分组合起来：
<style>
@keyframes fade {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
img {
width: 300px;
height: 200px;
animation: fade 3s ease-in-out infinite;
}
</style>
<img src="example.jpg" alt="渐变图片">
页面加载后，这张图片就会不断进行淡入淡出的动画。
基本上就这些。掌握 opacity 和 @keyframes 的搭配，就能轻松做出各种透明度过渡效果，不复杂但容易忽略细节，比如动画时长和循环设置。
