只改 transition-duration 会跳变，因 Bootstrap 5.3+ 轮播需同步设置 .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 协调。
为什么改了 .carousel-item 的 transition 还是没用
Bootstrap 5.3+ 的轮播动画不是靠单个类驱动的。JS 在切换时会动态切换 .active、.next、.prev 类，每类都参与位移和透明度过渡。漏掉任意一个，浏览器就会用默认值（通常是 0.6s）渲染缺失项，造成视觉撕裂。
-
.carousel-item：定义基础过渡规则，但仅影响初始状态 -
.carousel-item.active：控制当前页“保持显示”时的过渡行为 -
.carousel-item-next和.carousel-item-prev：分别控制下一张/上一张滑入/滑出的动画
三者 transition 值必须完全一致，包括属性、时长、缓动函数。
怎么写才真正生效（CSS 部分）
必须用以下写法，且不能省略任一选择器：
.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小数点精度问题 - 不要只写
transition-duration: 0.3s—— 它会覆盖整个 transition 声明，丢失 transform/opacity 分别控制的能力
为什么动画变快后反而闪屏
这是最常见的误配：CSS 动画时间变短了，但 JS 触发节奏没跟上。例如把 transition-duration 改成 0.2s，却还用 data-bs-interval="300"（300ms），结果动画刚结束就立刻切下一张，人眼看到的是“闪”，不是“快”。
必须满足：data-bs-interval ≥ transition-duration × 1000 + 100（单位毫秒）
- 动画设为
0.3s→data-bs-interval至少设400 - 动画设为
0.2s→data-bs-interval至少设300 - 设成
0或"false"会禁用自动播放，不是“最快”
这个约束不是建议，是 Bootstrap 内部事件节流逻辑决定的硬性要求。
移动端 touch 滑动为啥不响应新速度
CSS transition 对鼠标悬停、键盘导航、左右箭头都有效，但原生 touch 拖拽（swipe）依赖 touchstart/touchend 的节流判断，不受 CSS 动画时长影响。
- 真机测试比 DevTools 的 device toolbar 更可靠——部分 Android WebView 对
transform过渡有延迟渲染 - 确保引入的是
bootstrap.bundle.min.js（含 Popper），而非仅 CSS +bootstrap.min.js - 检查是否被第三方库（如 hammer.js）劫持了 touch 事件
如果拖拽动画卡顿或不同步，优先排查 JS 层事件监听逻辑，而不是继续调 transition-duration。
