bootstrap模态框默认动画由.fade和.show类配合css transition实现，时长.3s、ease-out缓动；替换需覆盖.modal.fade .modal-dialog等三处规则；接入animate.css应监听show.bs.modal事件动态添加动画类。
模态框默认动画是怎么被触发的
Bootstrap 的 modal 显示/隐藏时自带淡入淡出 + 缩放效果，本质是靠 CSS 类 .fade 和 .show 配合过渡（transition）实现的。它不依赖 JavaScript 动画帧，而是纯 CSS 触发：当 modal 元素被 JS 加上 .show 类、且父容器有 .fade 时，CSS 中定义的 opacity 和 transform 变化就自动生效。
- 默认动画由
bootstrap.min.css里的.modal.fade .modal-dialog规则控制 - 动画时长固定为
.3s，缓动函数是ease-out - 如果去掉
.fade类，模态框会直接闪现，无过渡
替换动画必须改哪些 CSS 类
想换掉默认动画，不是加个新 class 就行，得覆盖 Bootstrap 原有规则链。关键要重写三处：
-
.modal.fade .modal-dialog：控制进入时的 transform / opacity 起始和结束状态 -
.modal.fade .modal-dialog.modal-static（如果要用静态位移）：避免和默认缩放冲突 -
.modal.show .modal-dialog：确保显示态的最终样式不被重置
常见错误是只改了 @keyframes 却没覆盖 transition 属性，结果动画不触发或卡顿。
- 必须显式设置
transition: transform .4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity .4s（时长和函数按需调） -
transform-origin影响缩放/旋转中心点，比如从底部滑入就得设bottom center - 不要修改
.modal-backdrop的动画逻辑，否则遮罩层和内容不同步
用 animate.css 或自定义 keyframes 怎么安全接入
直接引入 animate.css 后，不能对 .modal 直接加 animate__slideInUp 这类类名——因为 Bootstrap 的 .show 切换是 JS 控制的，而 animate.css 的动画需要手动触发动画类的增删。
更可靠的做法是监听事件，在合适时机加类：
- 监听
show.bs.modal：此时模态框 DOM 已挂载但未显示，可在此加入场动画类 - 监听
shown.bs.modal：此时动画已开始，适合做后续交互启用 - 用
element.classList.add('animate<strong>animated', 'animate</strong>slideInUp')，别忘了在hide.bs.modal里清理类防止重复触发
示例片段：
$('#myModal').on('show.bs.modal', function () {
$(this).find('.modal-dialog').removeClass('animate__animated animate__slideInUp').addClass('animate__animated animate__slideInUp');
});
- 注意：animate.css v4+ 默认禁用
prefers-reduced-motion用户的动画，若需强制启用，得加!important或重写媒体查询 - 自定义
@keyframes时，命名别和 Bootstrap 冲突（比如别叫modal-fade），建议加项目前缀如my-modal-slide
移动端 Safari 上动画卡顿或失效怎么办
iOS Safari 对 transform + opacity 组合的硬件加速支持不稳定，尤其在 modal 多层嵌套或页面有大量 position: fixed 元素时。
必须给
.modal-dialog加transform: translateZ(0)或will-change: transform强制 GPU 渲染避免在动画中同时修改
height或margin，这些会触发重排，Safari 下极易掉帧如果用
animate.css，确认你引入的是完整版（不是仅 CSS 版），否则某些动画依赖 JS 补丁某些 iOS 版本下，
backdrop-filter和模态框动画共存会导致闪烁，临时方案是动画期间关闭毛玻璃效果真机调试时用 Safari 开发者工具勾选 “Disable animations”，快速验证是否是动画本身问题而非逻辑错误
动画真正难的不是写出来，是让每个设备、每种系统版本都表现一致。尤其是 transform-origin 和 will-change 的组合，稍不注意就在某个 iOS 小版本里静默失效。
