必须同时覆盖.carousel-item、.carousel-item.active、.carousel-item-next/.carousel-item-prev三个选择器的transition时长（如均为0.3s），并确保data-bs-interval≥transition-duration×1000+100ms，否则会出现跳变、闪屏或触控不同步。
改 transition-duration 能调动画快慢，但只改一处根本没用——Bootstrap 5 的轮播动画由三类元素协同控制，漏掉任何一个都会跳变、闪屏或触控不同步。
必须同时覆盖的三个 CSS 选择器
Bootstrap 5（v5.3+）不再只靠 .carousel-item 单一过渡，而是用 class 切换区分「当前项」「即将进入项」「即将退出项」。只改其中一个，浏览器会按默认时长渲染缺失项，造成视觉撕裂。
-
.carousel-item：定义基础过渡规则，但仅影响初始状态 -
.carousel-item.active：控制当前页“保持显示”时的过渡行为 -
.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;
}
data-bs-interval 必须 ≥ transition-duration + 0.1s
CSS 控动画过程，JS 控触发节奏。如果把 transition-duration 改成 0.2s，但 data-bs-interval="300"（300ms），结果是动画刚结束就立刻切下一张，人眼看到的是“闪屏”，不是“快”。
- 推荐公式：
data-bs-interval≥transition-duration× 1000 + 100（单位毫秒） - 例如 CSS 设为
0.3s，则 HTML 中至少写data-bs-interval="400"，JS 初始化写{ interval: 400 } - 设为
0或false会禁用自动轮播；负数会被忽略
移动端 touch 滑动不响应新速度？这不是 CSS 的锅
transition-duration 只影响鼠标悬停、左右箭头、键盘导航的动画节奏，但 touch 拖拽（swipe）依赖 JS 的 touchstart/touchend 节流逻辑，完全不受该 CSS 值控制。
- 真机测试比 DevTools 的 device toolbar 更可靠——部分 Android WebView 对 touch 事件处理有差异
- 确认引入的是
bootstrap.bundle.min.js（含 Popper），而非仅 CSS +bootstrap.min.js - 检查是否被第三方库（如
hammer.js）劫持了 touch 事件监听器
容易被忽略的渲染优化点
即使 CSS 和 JS 都配对了，低端设备或复杂 DOM 下仍可能卡顿，根源常在 GPU 加速未生效。
- 给
.carousel-inner加will-change: transform，提示浏览器提前升层 - 避免在
.carousel-item上用min-height、flex: 1等依赖内容尺寸的布局方式 - 每张图显式设置
width和height属性，防止切换时触发重排（reflow） - 别用
transition: all .3s—— 它会让所有属性都参与过渡，包括那些你根本不想动的
真正生效的那几行 CSS 很短，但背后要协调的 JS 行为、媒体查询降级、硬件加速链路，一个没对齐，用户看到的就是“改了但没完全改”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
