bootstrap 5 modal动画由css transition控制，js仅切换.show类；自定义需重写.modal.fade和.modal.show的css规则，注意transition属性完整性、优先级及backdrop同步，gpu加速可缓解旧浏览器卡顿。
Modal 动画由 CSS transition 控制，不是 JS 配置项
Bootstrap 5 的 modal 默认动画依赖于 .fade 类里的 opacity 和 transform 过渡，JS 层只负责添加/移除 .show 类来触发动画。想换效果，得改 CSS，不是调某个函数或参数。
常见错误是翻文档找 data-animation 或 options.animation —— Bootstrap 5 已移除这类配置，硬加无效。
- 动画逻辑完全在
.modal.fade和.modal.show的 CSS 规则里 - JS 只控制类名切换时机（比如
show.bs.modal后加.show） - 自定义前务必保留
.fade类（否则display: none → block会直接闪现）
覆盖默认 transition 的正确写法
直接重写 .modal.fade 的 transition 和 .modal.show 的 transform/opacity 值即可，但要注意优先级和 !important 的使用场景：
- 必须用比 Bootstrap CSS 更高的权重（比如加
.my-modal前缀，或用!important） - 过渡属性要写全：
transition: transform 0.3s ease-out, opacity 0.3s ease-out，漏掉opacity会导致淡入失效 - 别只改
.show，也要同步调整.modal.fade的初始状态（比如transform: scale(0.95)）
示例（从顶部滑入）：
.my-modal .modal.fade {
opacity: 0;
transform: translateY(-20px);
transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.my-modal .modal.show {
opacity: 1;
transform: translateY(0);
}
关闭动画不同步？检查 backdrop 和 modal 的 transition 时长是否一致
如果 Modal 弹出时有动画，但点击遮罩层关闭时“啪”一下消失，大概率是 .modal-backdrop 的 transition 没同步修改。Bootstrap 默认 backdrop 也走 .fade，但它的 CSS 独立存在。
- 需同时覆盖
.modal-backdrop.fade和.modal-backdrop.show - 时长必须和 modal 主体一致，否则视觉撕裂（比如 modal 动 300ms，backdrop 动 150ms）
- 若禁用 backdrop 动画，可设
.modal-backdrop.fade { transition: none; }，但别只改.show
IE11 或旧版 Safari 下 transform 动画卡顿
用 transform: scale() 或 translateZ(0) 强制 GPU 加速能缓解，但要注意兼容性边界：
- IE11 不支持
transform: translateX(0) translateY(0)的简写，得写全transform: translate(0, 0) - 旧 Safari（transform: scale(.9) rotate(2deg) 组合渲染不稳定，建议拆成单属性动画
- 如果项目还需支持 IE，优先用
top/opacity替代transform（性能更稳，只是层级控制稍麻烦）
真正难的不是写新动画，而是让 modal、backdrop、scrollbar 行为在各种关闭路径（ESC、点击 backdrop、点 X、JS 调用 hide()）下都保持一致。动效一改，这三处就得一起验。
