使用transition和animation可实现CSS透明度渐变，hover时通过transition平滑改变opacity实现淡入淡出，自动循环动画则用@keyframes定义关键帧并设置infinite循环，多个元素交错出现可通过animation-delay控制延迟，配合forwards保持最终状态，注意opacity影响整体元素，性能敏感场景建议优化或使用rgba替代。
在CSS中实现透明度渐变过渡，也就是让元素的 opacity 值随时间平滑变化，常用于淡入、淡出、悬停效果或轮播图切换。这种动画效果简单却非常实用。下面介绍几种常用方法和技巧。
使用 transition 实现 hover 淡入淡出
当你希望元素在鼠标悬停时逐渐变透明或显现，可以结合 :hover 伪类与 transition 属性。示例：图片悬停时变半透明
.fade-img {
opacity: 1;
transition: opacity 0.3s ease;
}
.fade-img:hover {
opacity: 0.5;
}
说明：元素默认不透明，当鼠标移上时，opacity 在 0.3 秒内线性过渡到 0.5，移开后自动恢复。
使用 @keyframes 创建循环淡入淡出动画
如果需要自动播放的透明度动画（如广告横幅轮播），使用 @keyframes 更合适。示例：元素周期性闪烁
@keyframes fadeInOut {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
.blink {
animation: fadeInOut 2s infinite;
}
说明：该动画从完全透明到完全显示再回到透明，每2秒循环一次。适用于提示性元素。
多个元素交错淡入（延迟控制）
在制作列表或卡片组依次出现的效果时，可通过设置不同的 animation-delay 实现错峰动画。示例：三个方块依次淡入
立即学习“前端免费学习笔记（深入）”；
.box {
opacity: 0;
animation: fadeIn 1s forwards;
}
.box:nth-child(1) { animation-delay: 0.2s; }
.box:nth-child(2) { animation-delay: 0.4s; }
.box:nth-child(3) { animation-delay: 0.6s; }
@keyframes fadeIn {
to { opacity: 1; }
}
说明：forwards 确保动画结束后保持最终状态（opacity: 1），不会回退。
注意事项与技巧
- opacity 只影响元素整体透明度，包括其子元素和文本。
- 值范围为 0（完全透明）到 1（完全不透明），可使用小数如 0.8。
- 避免对大量元素同时使用复杂 opacity 动画，可能影响性能。
- 若只需背景透明而不影响内容，建议使用 rgba() 或 hsla() 而非 opacity。
- 配合 visibility 可实现更精确的显示控制（例如 opacity 动画完成后设置 visibility:hidden）。
基本上就这些。掌握 opacity 配合 transition 和 animation 的用法，就能轻松实现各种自然的透明度过渡效果。关键是理解触发方式（用户交互 or 自动播放）和动画持续时间的协调。
