使用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：

立即学习“前端免费学习笔记（深入）”；

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

.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，实现流畅又安全的显示隐藏。

以上就是css动画 css overflow css pointer display position overflow margin transform transition animation