CSS动画如何实现弹出框淡入淡出_opacity与@keyframes控制显示-css教程-PHP中文网

CSS动画如何实现弹出框淡入淡出_opacity与@keyframes控制显示

P粉602998670

发布： 2025-11-30 19:15:06

原创

828人浏览过

弹出框淡入淡出可通过CSS opacity与@keyframes实现。1. 设置opacity从0到1，结合visibility控制显示隐藏；2. 使用@keyframes定义fadeIn和fadeOut动画，配合animation-fill-mode:forwards保持最终状态；3. 通过JavaScript切换类名触发动画，移除.hide类时淡入，添加.hide类时淡出，确保过渡自然且无点击穿透。

css动画如何实现弹出框淡入淡出_opacity与@keyframes控制显示

弹出框的淡入淡出效果可以通过 CSS 中的 opacity 属性结合 @keyframes 实现，既能控制透明度变化，又能平滑过渡显示与隐藏。这种方式无需 JavaScript 动画库，轻量且兼容性好。

1. 使用 opacity 控制透明度过渡

通过设置元素的 opacity 从 0（完全透明）到 1（完全不透明），配合 transition 实现渐变效果。

初始状态设置 opacity: 0; visibility: hidden;，确保元素不可见且不占布局空间。
显示时改为 opacity: 1; visibility: visible;，并添加过渡动画时间。
visibility 避免点击穿透，opacity 提供视觉淡入效果。

2. 利用 @keyframes 定义关键帧动画

使用 @keyframes 可以更精细地控制动画过程，比如实现缓动或延迟效果。

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.popup {
  opacity: 0;
  visibility: hidden;
  animation: fadeIn 0.3s ease forwards;
}

.popup.hide {
  animation: fadeOut 0.3s ease forwards;
}

登录后复制

注意：使用 animation-fill-mode: forwards; 让动画结束后保持最终状态。