必须同时覆盖.carousel-item、.carousel-item.active、.carousel-item-next和.carousel-item-prev四个选择器的transition声明（均含transform和opacity，时长一致），否则漏掉任一将回退默认0.6s导致视觉撕裂。
只改 .carousel-item 的 transition-duration 为什么没用
因为 Bootstrap 5.3+ 的轮播动画不是靠单个类驱动的。JS 切换时会动态添加/移除 .active、.next、.prev 类，浏览器分别按这些类渲染过渡效果。漏掉任意一个，就会回退到默认的 0.6s，造成视觉撕裂——你看到的“没变快”，其实是三类状态在用不同速度动画。
必须同时覆盖哪三个 CSS 选择器
这三组规则必须完全一致，包括属性、时长、缓动函数：
-
.carousel-item：定义基础过渡（初始挂载时生效） -
.carousel-item.active：控制当前页“保持显示”期间的 opacity 和 transform 行为 -
.carousel-item-next和.carousel-item-prev：分别控制下一张/上一张滑入/滑出的位移与淡入淡出
正确写法示例（0.3s 动画）：
.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 声明，丢失分项控制能力。
data-bs-interval 和 CSS 动画时长怎么配才不闪屏
CSS 控动画过程，JS 控触发节奏。两者不匹配，人眼看到的是“闪”，不是“快”。这是 Bootstrap 内部事件节流逻辑决定的硬性要求，不是建议。
- 公式：
data-bs-interval≥transition-duration× 1000 + 100（单位毫秒） - 动画设为
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）不依赖 transition-duration —— 它由 JS 的 touchstart/touchend 节流逻辑控制，和 CSS 过渡时长无关。
如果你发现手指滑动时动画变慢或不同步：
真正容易被忽略的是：所有四类选择器的 transition 值必须字面完全一致，哪怕多一个空格、少一个逗号，都可能导致某类状态回退到默认 0.6s，引发跳变。别信“只改一处就够了”的直觉。
