Bootstrap 模态框(Modal)加载动画自定义 CSS3-Bootstrap教程-PHP中文网

Bootstrap模态框加载动画本质是CSS transition而非JS帧动画，必须通过修改.modal.fade .modal-dialog的transition、transform和opacity等CSS属性来自定义，HTML中必须包含fade类，且不可使用transition:all或作用于错误选择器。

bootstrap 模态框的加载动画（即 show/hide 过程）本质是 css transition，不是 js 控制的帧动画；想自定义，必须改 css，不能靠 data-bs-animation 或 js 选项。

为什么直接加 `animate__bounceIn` 类没反应

因为 Bootstrap 的 .modal 显示逻辑是：JS 动态添加 .show 类 → 浏览器触发 CSS transition → 动画播放。而 animate.css 的类（如 animate__bounceIn）依赖 animation 属性 + 类名增删触发动画，但 Bootstrap 并不自动帮你加/删这些类。

常见错误现象：

模态框一闪就出，无任何过渡 → HTML 中漏了 fade 类：
加了 animate__bounceIn 但不动 → 没监听 show.bs.modal 事件去手动添加类


动画播完卡住、第二次点开失效 → 没在 hide.bs.modal 或 hidden.bs.modal 里清理动画类

.modal.fade .modal-dialog 是唯一有效的动画作用点
Bootstrap 5 不会对 .modal 或 .modal-content 应用 transition，只认 .modal.fade .modal-dialog 这个选择器链。其他地方加 transition 都无效。
实操要点：

初始状态必须设为 transform: translateY(-20px); opacity: 0;（或你想要的入场起点）
显示态写成 .modal.fade.show .modal-dialog，恢复 transform: translateY(0); opacity: 1;

务必显式声明 transition: transform 0.3s ease-out, opacity 0.3s ease-out; —— 漏掉 opacity 就只有位移、没淡入
别用 transition: all，它会把 margin、padding 等无关属性也拖进动画，引发重排卡顿

如何同步修改 backdrop 动画避免“啪”一下消失
点击遮罩层关闭时模态框突兀消失？说明 .modal-backdrop 的 transition 时长或时机没和 .modal-dialog 对齐。

											
												
												
													VPS Bootstrap
													从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
												
												下载
												
											
										
必须同时覆盖两处：


.modal-backdrop.fade：设 opacity: 0; 和 transition: opacity 0.3s ease-out;


.modal-backdrop.show：设 opacity: 0.5;（或你用的值）
时长必须完全一致，否则视觉撕裂；若不想动 backdrop，可设 .modal-backdrop.fade { transition: none; }，但别只改 .show


移动端卡顿或 iOS Safari 闪动怎么办
复杂内容 + transform + opacity 过渡在旧 WebView 容易掉帧，尤其动画时间拉长后更明显。
缓解手段：

给 .modal-dialog 加 transform: translateZ(0); 或 will-change: opacity; 触发 GPU 加速
避免在动画中改变 height、margin、font-size 等触发重排的属性
慎用 prefers-reduced-motion 用户强制启用动画：animate.css v4+ 默认禁用，需额外加 @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; } } 覆盖（但一般不建议）

最易被忽略的一点：所有自定义动画都依赖 .fade 类存在且未被 JS 移除；如果用 data-bs-animation="false" 或手动调 modal.hide() 后没恢复 .fade，后续动画就彻底失效——这不是 bug，是 Bootstrap 的设计前提。