css animation与visibility结合制作显示隐藏效果

使用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 防止交互

实际应用示例：模态框显示隐藏

.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 animation与visibility结合制作显示隐藏效果的详细内容，更多请关注php中文网其它相关文章！