必须同时修改.carousel-item、.carousel-item.active、.carousel-item-next/.carousel-item-prev三处transition-duration值（如均为0.3s），并确保data-bs-interval≥transition-duration×1000+100ms，否则因类间动画不同步导致闪屏或跳变。
只改 data-bs-interval 不会影响动画“滑动多快”，它只控制等多久切下一张；真正决定滑动动画快慢的，是 css 的 transition-duration，但必须三处一起改，漏一个就跳变。
为什么只改 .carousel-item 的 transition-duration 会闪屏
Bootstrap 5.3+ 的轮播动画由三类状态协同驱动，浏览器按不同 class 分别渲染过渡效果。漏掉任意一个，就会出现视觉撕裂：
-
.carousel-item：定义基础过渡规则，但仅影响初始挂载时的状态 -
.carousel-item.active：控制当前页“保持显示”期间的过渡行为（比如 opacity 维持） -
.carousel-item-next和.carousel-item-prev：分别控制下一张/上一张“滑入/滑出”的位移动画
这三者 transition 值必须完全一致，例如都写成 transform 0.3s ease-in-out, opacity 0.3s ease-in-out。只改其中一处，其他类会回退到 Bootstrap 默认的 0.6s，导致动画不同步、闪屏或残留旧图。
怎么安全地把滑动动画从 0.6s 改成 0.3s
直接覆盖这四行 CSS，确保优先级足够（建议放在 Bootstrap CSS 之后，或加 !important）：
.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或省略小数点 - 如果用了自定义
transform（比如 Y 轴偏移），确保所有值单位一致（全用px或全用rem）
data-bs-interval 和 transition-duration 必须匹配
CSS 控动画过程，JS 控触发节奏。两者不协调，人眼看到的是“闪屏”，不是“快”。公式是：
data-bs-interval ≥ transition-duration × 1000 + 100（单位毫秒）
比如你设了 transition-duration: 0.3s，那么 data-bs-interval 至少得是 400：
- HTML 写法：
data-bs-interval="400" - JS 初始化写法：
new bootstrap.Carousel(element, { interval: 400 }) - 设为
0或false会禁用自动轮播；设为负数会被忽略
低于这个阈值，动画刚结束就立刻触发下一次切换，视觉上就是跳变——尤其在低端设备或复杂 DOM 下更明显。
移动端 touch 滑动为什么不跟着变快
transition-duration 对 touch 拖拽完全无效。手指滑动依赖 JS 的 touchstart/touchend 节流逻辑，不是 CSS 动画。
如果你发现真机 swipe 时动画变慢或不同步，检查：
- 是否引入的是
bootstrap.bundle.min.js（含 Popper），而非仅 CSS +bootstrap.min.js - 有没有第三方库（如
hammer.js）劫持了 touch 事件 - DevTools 的 device toolbar 不够准，务必用真机测试 —— 部分 Android WebView 对
transform过渡有延迟渲染
真正影响 touch 滑动响应速度的，是 JS 层的节流阈值和 sliding 状态判断逻辑，不是 CSS。
