使用@keyframes定义opacity从0到1或1到0的动画；2. 通过animation属性设置持续时间与缓动函数触发动画；3. 结合visibility和pointer-events优化隐藏状态交互体验。
想让网页元素平滑地淡入或淡出？利用CSS的 opacity 配合 @keyframes 和 animation 属性，可以轻松实现渐隐渐显效果。关键在于控制透明度变化和过渡时间，同时避免影响布局。
1. 使用 @keyframes 定义透明度动画
通过 @keyframes 设置 opacity 从 0 到 1（淡入）或从 1 到 0（淡出）的变化过程。
@keyframes fadeIn {from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
2. 应用 animation 属性触发动画
将定义好的动画绑定到目标元素，设置持续时间、缓动函数和播放次数。
.fade-in {animation: fadeIn 1s ease-in-out;
}
.fade-out {
animation: fadeOut 1s ease-in-out;
}
- 1s 表示动画持续1秒
- ease-in-out 让动画开始和结束更柔和
- 默认情况下动画只播放一次
3. 配合 visibility 或 pointer-events 优化体验
opacity 为 0 时元素仍占据空间且可交互，若需完全“隐藏”，建议结合其他属性。
立即学习“前端免费学习笔记（深入）”；
- 使用 visibility: hidden 配合 opacity 控制是否可见
- 添加 pointer-events: none 防止透明状态下的点击事件
- 配合 transition 实现非关键帧的平滑过渡（如 hover 效果）
例如实现悬停淡入文字：
.hover-fade {opacity: 0;
transition: opacity 0.3s;
}
.container:hover .hover-fade {
opacity: 1;
} 基本上就这些。opacity 动画简单高效，适合提示信息、轮播图切换、按钮状态等场景，注意性能和可访问性即可。
