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类：<div class="modal fade"> <li>加了 <code>animate__bounceIn但不动 → 没监听show.bs.modal事件去手动添加类 - 动画播完卡住、第二次点开失效 → 没在
hide.bs.modal或hidden.bs.modal里清理动画类 - 初始状态必须设为
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等无关属性也拖进动画，引发重排卡顿 -
.modal-backdrop.fade：设opacity: 0;和transition: opacity 0.3s ease-out; -
.modal-backdrop.show：设opacity: 0.5;（或你用的值） - 时长必须完全一致，否则视觉撕裂；若不想动 backdrop，可设
.modal-backdrop.fade { transition: none; }，但别只改.show - 给
.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; } }覆盖（但一般不建议）
.modal.fade .modal-dialog 是唯一有效的动画作用点
Bootstrap 5 不会对 .modal 或 .modal-content 应用 transition，只认 .modal.fade .modal-dialog 这个选择器链。其他地方加 transition 都无效。
实操要点：
立即学习“前端免费学习笔记（深入）”；
如何同步修改 backdrop 动画避免“啪”一下消失
点击遮罩层关闭时模态框突兀消失？说明 .modal-backdrop 的 transition 时长或时机没和 .modal-dialog 对齐。
必须同时覆盖两处：
移动端卡顿或 iOS Safari 闪动怎么办
复杂内容 + transform + opacity 过渡在旧 WebView 容易掉帧，尤其动画时间拉长后更明显。
缓解手段：
最易被忽略的一点：所有自定义动画都依赖 .fade 类存在且未被 JS 移除；如果用 data-bs-animation="false" 或手动调 modal.hide() 后没恢复 .fade，后续动画就彻底失效——这不是 bug，是 Bootstrap 的设计前提。
