使用CSS animation与opacity可实现淡入淡出效果。1. 通过@keyframes定义fadeIn和fadeOut动画，控制opacity从0到1或反之，并绑定至元素；2. 实现无限循环时，用animation-iteration-count: infinite或在关键帧中设置0%透明、50%不透明、100%透明，使元素持续闪烁；3. 可通过animation-delay设置延迟，animation-direction: alternate实现正反交替播放，常用于平滑轮播；4. 注意opacity为0时元素仍占布局空间，需彻底隐藏应结合visibility或pointer-events，避免性能问题，现代浏览器支持良好，IE10+兼容。
使用 CSS 的 animation 与 opacity 结合，可以轻松实现元素的淡入淡出效果。关键在于通过 @keyframes 定义透明度的变化过程，并将其应用到目标元素上。
1. 基本语法结构
定义一个关键帧动画，控制 opacity 从 0 到 1（淡入），或从 1 到 0（淡出）：
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }然后将动画绑定到元素：
.fade-in { animation: fadeIn 2s ease-in-out; } .fade-out { animation: fadeOut 2s ease-in-out; }2. 实现无限循环的淡入淡出
如果希望元素持续地淡入淡出，比如轮播图中的图片，可以设置 animation-iteration-count 为 infinite：
立即学习“前端免费学习笔记（深入）”；
@keyframes fadeInOut { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .blink { animation: fadeInOut 3s ease-in-out infinite; }这个动画会让元素在 3 秒内从透明到完全显示再回到透明，不断重复。
3. 控制动画延迟与方向
可以进一步优化体验，比如添加延迟、反向播放等：
- animation-delay：设置动画开始前的等待时间
- animation-direction: alternate：让动画在奇数次正向播放，偶数次反向播放，适合来回渐显渐隐
该设置表示：延迟 0.5 秒开始，每次正反交替播放，无限循环。
4. 注意事项与兼容性
opacity 动画性能较好，但要注意以下几点：
- opacity 为 0 时元素仍占据布局空间，如需彻底隐藏可配合 visibility 或 pointer-events
- 避免在大量元素上同时运行复杂动画导致卡顿
- 大多数现代浏览器都支持，IE10+ 支持良好
基本上就这些，不复杂但容易忽略细节。
