在网页开发中，图片渐显动画是提升页面视觉流畅度的重要交互效果，通过CSS的animation属性配合opacity属性，无需编写JavaScript代码就能实现平滑的图片显现过程，这种方式性能更优且实现逻辑简单。
核心实现原理
图片渐显的本质是控制图片的透明度从完全透明过渡到完全不透明，CSS的opacity属性取值范围是0到1，0代表完全透明，1代表完全不透明。而animation属性可以让我们定义透明度变化的规则、持续时间、缓动函数等参数，让这个变化过程呈现动画效果。
基础实现步骤
1. 定义HTML结构
首先需要在页面中放置需要添加渐显动画的图片元素，给元素添加对应的类名方便后续样式匹配。
<img class="fade-in-image" src="https://ipipp.com/demo-img.jpg" alt="渐显图片示例">
2. 编写CSS动画样式
先定义关键帧动画，描述透明度从0到1的变化过程，再将动画绑定到图片元素上。
/* 定义渐显关键帧动画 */
@keyframes fadeIn {
from {
opacity: 0; /* 初始状态完全透明 */
}
to {
opacity: 1; /* 结束状态完全不透明 */
}
}
/* 绑定动画到图片元素 */
.fade-in-image {
width: 300px;
height: 200px;
/* 动画名称、持续时间1秒、缓动函数ease、延迟0秒、播放一次、结束后保持结束状态 */
animation: fadeIn 1s ease 0s 1 forwards;
}
3. 参数说明
animation属性的完整语法是animation: name duration timing-function delay iteration-count direction fill-mode play-state;，我们常用的参数含义如下：
- name：对应@keyframes定义的动画名称，这里就是fadeIn
- duration：动画持续时间，单位可以是s（秒）或者ms（毫秒）
- timing-function：缓动函数，ease表示先快后慢的自然过渡，linear表示匀速过渡
- delay：动画延迟执行的时间，比如设置0.5s就是页面加载后0.5秒才开始播放动画
- iteration-count：动画播放次数，1表示播放一次，infinite表示无限循环
- fill-mode：动画结束后的状态，forwards表示保持动画结束时的状态，避免动画结束后图片变回透明
进阶优化方案
1. 添加初始隐藏避免闪烁
如果页面加载较慢，可能会出现图片先显示再突然消失开始播放动画的闪烁问题，我们可以给图片添加初始透明度为0的样式解决。
.fade-in-image {
width: 300px;
height: 200px;
opacity: 0; /* 初始状态隐藏，避免加载闪烁 */
animation: fadeIn 1s ease 0s 1 forwards;
}
2. 多图片依次渐显
如果需要多个图片依次出现，可以给不同图片设置不同的动画延迟时间。
<div class="image-list"> <img class="fade-in-image img-1" src="https://ipipp.com/demo-img1.jpg" alt="图片1"> <img class="fade-in-image img-2" src="https://ipipp.com/demo-img2.jpg" alt="图片2"> <img class="fade-in-image img-3" src="https://ipipp.com/demo-img3.jpg" alt="图片3"> </div>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in-image {
width: 200px;
height: 150px;
margin: 10px;
opacity: 0;
}
/* 第一个图片无延迟 */
.img-1 {
animation: fadeIn 1s ease 0s 1 forwards;
}
/* 第二个图片延迟0.3秒 */
.img-2 {
animation: fadeIn 1s ease 0.3s 1 forwards;
}
/* 第三个图片延迟0.6秒 */
.img-3 {
animation: fadeIn 1s ease 0.6s 1 forwards;
}
兼容性与注意事项
CSS animation属性在现代浏览器中支持度很好，如果需要兼容旧版浏览器，可以添加浏览器前缀：
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in-image {
width: 300px;
height: 200px;
opacity: 0;
-webkit-animation: fadeIn 1s ease 0s 1 forwards;
animation: fadeIn 1s ease 0s 1 forwards;
}
另外需要注意，如果图片本身设置了display: none属性，动画可能不会生效，因为display:none的元素不会被浏览器渲染，此时可以改用visibility: hidden配合visibility: visible在动画中控制显示状态。