Bootstrap 5 干扰原生 CSS 动画的三大主因是 animation-name 匹配失败、display: none 阻断启动、.fade 类被误删；需确保 @keyframes 名称逐字一致、用 visibility 替代 display 隐藏、.fade 必须加在组件根元素上。
Bootstrap 5 不会“禁用”你的原生 CSS 动画，但它的样式规则、JS 行为和默认类名设计，会直接干扰动画触发条件或覆盖关键属性——问题几乎总出在 animation-name 匹配失败、display: none 阻断启动、或 .fade 类被误删这三处。
animation-name 和 @keyframes 名称不匹配
这是最常被忽略的静默失效原因：浏览器不报错，只跳过动画。哪怕一个空格、大小写差异（如 @keyframes fadeIn 对应 animation-name: fadein），动画就彻底不执行。
- 打开开发者工具 → Elements 面板 → 选中目标元素 → Styles 面板里找
animation-name，确认值是否与@keyframes定义**逐字一致** -
@keyframes必须出现在使用它的 CSS 规则之前；若通过 JS 动态注入样式，要先注入@keyframes，再注入带animation-name的规则 - 构建工具（如 Vite）可能 tree-shake 掉未显式引用的
@keyframes，检查打包后 CSS 是否还包含它
元素处于 display: none 或未渲染状态
Bootstrap 很多组件（如 .modal、.collapse、.carousel-item）默认用 display: none 隐藏内容。CSS 动画无法在 display: none 元素上启动，哪怕你写了 animation-delay: 1s 也无效。
- 改用
visibility: hidden+opacity: 0替代display: none，确保元素仍在渲染流中 - 对
.modal，必须保留.fade类（即class="modal fade"），否则 Bootstrap JS 不会触发动画逻辑，且你的自定义动画也因 DOM 状态不稳定而失效 - 轮播项
.carousel-item默认是display: none，想让它支持入场动画，得先设.carousel-item { visibility: hidden; opacity: 0; }，再用.carousel-item.active覆盖为visibility: visible; opacity: 1;
Bootstrap 5 的 .fade 类被删或写错位置
Bootstrap 5 的 .fade 不是可有可无的装饰类——它是 JS 控制显隐的开关，也是许多过渡效果（包括你自定义的 animation）的依赖锚点。漏掉它，或把它写在错误元素上，动画就失去触发上下文。
立即学习“前端免费学习笔记（深入）”；
-
.fade必须加在组件根元素上：<div class="modal fade">，不是 <code><div class="modal-dialog fade">，也不是 <code><div class="modal-content fade"> <li>模态框动画作用点是 <code>.modal.fade .modal-dialog，给.modal或.modal-content直接加animation属性，基本无效 - 如果你用
animate.css，必须同时加animate__animated和具体动画类（如animate__fadeIn），且animate__animated要写在.fade同一元素上
真正卡住人的，往往不是动画写得不对，而是元素根本没“活过来”——多看一眼 Elements 面板里目标元素当前的 display、visibility 和实际应用的类名，比反复调 animation-duration 有用得多。
