必须同时修改.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、.carousel-item-next、.carousel-item-prev，浏览器分别按这些类渲染过渡效果。漏掉任意一个，就会回退到默认的 0.6s，造成视觉撕裂。
-
.carousel-item：定义基础过渡规则（初始挂载时生效） -
.carousel-item.active：控制当前页“保持显示”期间的transform和opacity行为 -
.carousel-item-next和.carousel-item-prev：分别控制下一张/上一张滑入/滑出的位移与淡入淡出
怎么写 CSS 才真正生效
必须同时声明 transform 和 opacity，单位统一用 s，不能只写 transition-duration —— 它会覆盖整个声明，丢失分项控制能力。
.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;
}
- 优先级不够时加
!important，或确保样式表在 Bootstrap CSS 之后加载 - 别混用
ms和s，比如300ms和0.3s在某些浏览器解析不一致 - 避免只改其中一个属性（如只改
transform），否则可能位移但不淡出
data-bs-interval 必须 ≥ transition × 1000 + 100
CSS 控动画过程，JS 控触发节奏。两者不匹配，人眼看到的是“闪”，不是“快”。这是 Bootstrap 内部事件节流逻辑决定的硬性要求。
- 动画设为
0.3s→data-bs-interval至少设400 - 动画设为
0.2s→data-bs-interval至少设300 - 这个属性必须写在最外层容器上：
<div class="carousel slide" data-bs-interval="400"> - 写在
.carousel-inner或.carousel-item里无效
容易被忽略的细节
移动端真机测试比 DevTools device toolbar 更可靠；will-change: transform 加在 .carousel-inner 上能缓解低端设备卡顿；触控滑动（swipe）不受 transition-duration 影响，但依赖 bootstrap.bundle.min.js 是否完整加载 —— 缺 Popper 可能导致 touch 事件不同步。
