使用@keyframes定义动画序列，控制opacity从0到1再到0；2. 通过animation属性将动画应用到元素，设置时长、速度曲线和循环次数；3. 设置初始透明度并优化交互行为，可选forwards保持最终状态，适用于提示框、轮播图等场景。
要实现元素的淡入淡出效果，可以通过CSS的animation属性结合opacity来控制透明度变化。这种方法无需JavaScript，性能好且易于维护。
1. 定义关键帧（@keyframes）
使用@keyframes创建一个动画序列，控制元素从完全透明到不透明（淡入），再回到透明（淡出）。
@keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
这个动画在中间时刻（50%）达到完全不透明，前后为透明状态，形成一次完整的淡入淡出循环。
2. 应用动画到元素
将定义好的动画通过animation属性绑定到目标元素上，并设置持续时间、执行次数等参数。
立即学习“前端免费学习笔记（深入）”；
.fade-element {
animation: fadeInOut 3s ease-in-out infinite;
}
说明：-
fadeInOut：引用上面定义的关键帧名称 -
3s：整个动画周期为3秒 -
ease-in-out：动画开始和结束较慢，中间较快，更自然 -
infinite：动画无限循环播放
3. 设置初始样式与过渡优化
确保元素默认状态下可被动画控制，同时可以配合visibility或transition做更精细处理。
.fade-element {
opacity: 0;
animation: fadeInOut 3s ease-in-out infinite;
/* 可选：防止点击穿透 */
pointer-events: none;
}
若只做单次淡入后保持可见，可省略循环并调整关键帧：
@keyframes fadeInOnce {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<p>.element-show {
animation: fadeInOnce 1s forwards;
}</p>注意：forwards表示动画结束后保留最终状态。
基本上就这些。利用opacity和@keyframes组合，就能轻松实现平滑的淡入淡出效果，适用于提示框、轮播图、加载遮罩等场景。
