必须同时覆盖.carousel-item、.carousel-item.active、.carousel-item-next/.carousel-item-prev四类选择器的transition声明（均含transform和opacity，时长、缓动函数完全一致），且data-bs-interval≥transition-duration×1000+100ms，否则因类间动画不同步导致闪屏或跳变。
改 transition-duration 单独生效不了，必须同步覆盖三类 CSS 类，且 data-bs-interval 要 ≥ 动画时长 × 1000 + 100ms，否则必闪屏或跳变。
为什么只改 .carousel-item 的 transition 没用
Bootstrap 5.3+ 的轮播动画不是靠一个类驱动的。JS 切换时会动态添加/移除 .active、.next、.prev 类，浏览器分别按这些类渲染过渡效果。漏掉任意一个，就会回退到默认的 0.6s，造成视觉撕裂。
-
.carousel-item：定义基础过渡规则（初始挂载时生效） -
.carousel-item.active：控制当前页“保持显示”期间的transform和opacity行为 -
.carousel-item-next和.carousel-item-prev：分别控制下一张/上一张滑入/滑出的位移与淡入淡出
这四者必须用完全一致的 transition 值——属性、时长、缓动函数全部相同。
transition 必须怎么写才真正生效
不能只写 transition-duration: 0.3s，它会覆盖整个声明，丢失对 transform 和 opacity 的独立控制能力。
正确写法是：
.carousel-item {
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
- 必须同时声明
transform和opacity，否则可能只位移不淡出，或只淡入不位移 - 单位统一用
s（如0.3s），别混用ms或省略小数点 - 不要用
all 0.3s—— 它会把所有属性都加过渡，可能触发重排重绘，影响性能
data-bs-interval 怎么配才不闪屏
CSS 控动画过程，JS 控触发节奏。两者不匹配，人眼看到的是“闪”，不是“快”。这是 Bootstrap 内部事件节流逻辑决定的硬性要求。
- 动画设为
0.3s→data-bs-interval至少设400 - 动画设为
0.2s→data-bs-interval至少设300 - 这个属性必须写在最外层容器上：
<div class="carousel slide" data-bs-interval="400">，写在 <code>.carousel-inner或.carousel-item里无效 - 设成
0或"false"会禁用自动播放，不是“最快” - 如果手指滑动时动画变慢或不同步，先确认是否引入了
bootstrap.bundle.min.js（含 Popper），而非仅 CSS +bootstrap.min.js - 检查是否有第三方插件（如
hammer.js）劫持了 touch 事件 - 真机测试比 DevTools 的 device toolbar 更可靠——部分 Android WebView 对
transform过渡有延迟渲染
移动端 touch 滑动和键盘导航会受影响吗
纯 CSS 修改对鼠标悬停、左右箭头、键盘 ArrowLeft/ArrowRight 都有效，但 touch 拖拽（swipe）依赖 touchstart/touchend 的事件节流逻辑，不受 transition-duration 影响。
最容易被忽略的是：动画时间改短后，data-bs-interval 没同步调大一点，或者没删掉 HTML 中残留的旧 data-bs-interval 属性，导致 JS 初始化时被覆盖。
