怎么用CSS实现模态框Modal从中心缩放弹出的平滑动画-css教程-PHP中文网

display: none 使元素彻底脱离渲染流，浏览器跳过其样式计算与布局，导致 transform 和 opacity 过渡无法启动；应改用 visibility: hidden + opacity: 0 + transform: scale(0.85) 协同过渡，并显式声明 transition 属性。

怎么用css实现模态框modal从中心缩放弹出的平滑动画

为什么直接用 `display: none` 会导致缩放动画失效

因为 display: none 会让元素彻底脱离渲染流，浏览器跳过其样式计算和布局，transform: scale() 和 opacity 的过渡根本不会启动。你看到的只是“突然出现”，不是动画中断——它压根没开始。

必须改用可参与过渡的属性组合：

visibility: hidden 控制是否渲染（避免交互）
opacity: 0 控制透明度（可过渡）
transform: scale(0.85) 控制初始大小（可过渡；别用 scale(0)，iOS 下子元素可能消失或渲染异常）

三者缺一不可：只靠 opacity 会平铺弹出，没有纵深感；只靠 scale 会边缘模糊或闪烁；漏掉 visibility，隐藏时仍可点击或聚焦。

用 `transition` 实现缩放+淡入的最小可行写法

核心是定义两个状态类，用 JS 切换触发过渡。不依赖 @keyframes，更可控、更轻量：

/* 初始隐藏态 */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
<p>/<em> 显示态 </em>/
.modal.is-open {
visibility: visible;
opacity: 1;
transform: scale(1);
pointer-events: auto;
}</p>

关键细节：

transition 必须显式列出属性，避免意外触发动画（比如 transition: all 可能让 background-color 也动）
时间建议 0.2s ~ 0.3s：短于 0.2s 感觉抽搐，长于 0.3s 显得迟滞
ease 比 linear 更自然，模拟真实物理加速/减速
pointer-events: none 必须随 visibility: hidden 同步设置，否则遮罩层下内容仍可点击

关闭时动画反向播放失败的典型原因

常见错误是 JS 里执行 element.classList.remove('is-open') 后立刻设 style.display = 'none' 或强制 visibility: hidden，导致过渡被浏览器中止。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

正确做法只有两种：

监听 transitionend 事件，在动画结束帧再收尾：
element.addEventListener('transitionend', () => { element.classList.remove('is-open'); }, { once: true });
用两个独立类控制方向：
.modal.is-closing { opacity: 0; transform: scale(0.9); }，并在 CSS 中为 .is-closing 单独写 transition，JS 先加 is-closing，再在 transitionend 里移除所有类

注意：不要在 transitionend 里操作 display，优先用 visibility: hidden + pointer-events: none 收尾；如果模态框内有 <input>，退场前记得调用 input.blur()，否则键盘焦点残留。