使用CSS animation与visibility结合可实现流畅的淡入淡出动画，通过opacity控制透明度过渡，visibility确保元素在隐藏时不可交互且合理控制显示状态，利用关键帧精确设置visibility切换时机，避免transition无法驱动visibility的问题，常用于模态框等需要平滑显隐的场景。
使用 CSS animation 与 visibility 结合，可以实现更精细的显示隐藏动画效果。visibility 属性控制元素是否可见，配合 opacity 和 animation 能做出平滑的淡入淡出，同时确保元素在隐藏时不占用布局空间或无法交互。
visibility 的特性
visibility: hidden 会让元素不可见，但仍然占据文档流中的空间。如果希望元素完全“消失”且不占位，需要结合 position 或 display 控制，但 display 不能被 animation 驱动。因此，常通过 visibility 配合 opacity 实现过渡动画。
常见做法：用 opacity 做视觉淡入淡出，visibility 控制实际是否可见，避免用户可点击隐藏元素。
实现淡入淡出动画
以下是一个简单的例子，让元素从完全透明到可见，并在隐藏时延迟设置 visibility：
立即学习“前端免费学习笔记（深入）”；
.fade {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
.fade.show {
opacity: 1;
visibility: visible;
animation: fadeIn 0.3s forwards;
}
.fade.hide {
animation: fadeOut 0.3s forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
visibility: visible;
}
}
@keyframes fadeOut {
to {
opacity: 0;
visibility: hidden;
}
}说明：
- fadeIn 动画结束时 opacity 为 1，visibility 变为 visible
- fadeOut 动画结束时 opacity 为 0，visibility 变为 hidden
- 由于 visibility 在关键帧中变化，动画期间元素始终可渲染，避免突然消失
注意点与技巧
visibility 不支持 transition 过渡，只能靠 animation 关键帧来控制时间点。所以必须用 @keyframes 显式定义 visibility 的切换时机。
若想在隐藏后释放布局空间，可额外结合 height、max-height 或 margin 等属性做动画，但需注意：
- height: 0 + overflow: hidden 可隐藏内容
- max-height 适合不定高度的元素（如内容动态）
- 最终隐藏状态可加 pointer-events: none 防止交互
实际应用示例：模态框显示隐藏
```css .modal { opacity: 0; visibility: hidden; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }.modal.active { animation: showModal 0.4s forwards; }
@keyframes showModal { 0% { opacity: 0; visibility: hidden; } 1% { opacity: 0; visibility: visible; } 100% { opacity: 1; visibility: visible; } }
.modal.inactive { animation: hideModal 0.4s forwards; }
@keyframes hideModal { 0% { opacity: 1; visibility: visible; } 99% { opacity: 0; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
<p>技巧：在 1% 处设置 visibility: visible，确保动画开始时元素已可渲染；隐藏时在 99% 仍保持 visible，防止提前消失导致动画中断。</p> 基本上就这些，关键是利用 animation 分阶段控制 visibility 和 opacity，实现流畅又安全的显示隐藏。
