使用opacity设置图片初始透明度为0；2. 通过@keyframes定义从透明到不透明的动画过程；3. 将动画绑定到图片，设置时长、缓动和结束状态；4. 可选添加延迟或用JavaScript触发。结合CSS的opacity和animation属性可实现图片平滑渐显，提升视觉体验，无需JS控制透明度，性能更优。
让图片在页面加载或触发时平滑显现，是提升视觉体验的常用技巧。通过CSS的animation和opacity属性，可以轻松实现图片从完全透明到完全显示的渐显效果。
1. 使用opacity控制透明度
opacity属性用于设置元素的透明程度，取值范围为0（完全透明）到1（完全不透明）。渐显的核心就是从0逐渐过渡到1。
例如：
img {
opacity: 0;
}
2. 定义关键帧动画 @keyframes
使用@keyframes定义一个动画过程，描述opacity如何随时间变化。
立即学习“前端免费学习笔记（深入）”；
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
这个动画从透明开始，结束时完全可见。
3. 应用animation到图片
将定义好的动画绑定到图片元素，并设置动画时长、缓动函数等参数。
img {
opacity: 0;
animation: fadeIn 2s ease-in-out forwards;
}
说明：
- fadeIn：动画名称，对应@keyframes定义
- 2s：动画持续2秒
- ease-in-out：开始和结束较慢，中间较快，更自然
- forwards：动画结束后保持最后一帧状态，防止回退到opacity:0
4. 可选：设置延迟或触发条件
如果希望图片在页面加载一段时间后再显现，可添加animation-delay。
img {
opacity: 0;
animation: fadeIn 1.5s ease-in forwards;
animation-delay: 0.5s;
}
也可结合JavaScript，在用户滚动或交互时动态添加类来触发动画：
.fade-in-image {
opacity: 0;
animation: fadeIn 1s ease forwards;
}
HTML中初始不加类，JS检测到进入视口时再添加fade-in-image类。
基本上就这些。利用opacity配合animation，就能实现简洁流畅的图片渐显效果，无需JavaScript控制透明度变化，性能更好，代码也更清晰。
