需同时为.carousel-caption添加opacity和transform过渡，并确保其显隐由.carousel-item.active状态驱动，初始opacity:0、active时opacity:1，且小屏需解除display:none限制。
怎么让文字随轮播图一起淡入淡出
默认情况下，.carousel-caption 不参与轮播的过渡动画——它只是个绝对定位容器，opacity 和 transform 都没被 Bootstrap 的 transition 规则覆盖。所以你改了图片滑动速度，文字却“啪”一下硬切，毫无过渡感。
- 必须把
.carousel-caption加进 transition 链：和.carousel-item一样，它也要响应.active、.next、.prev状态变化 - 直接在 CSS 里追加这四行（放在 Bootstrap CSS 之后）：
.carousel-caption { transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; } .carousel-caption.active { opacity: 1; transform: translateY(0); } .carousel-caption:not(.active) { opacity: 0; transform: translateY(20px); } .carousel-item.active .carousel-caption { opacity: 1; transform: translateY(0); } - 注意：不能只靠
.carousel-caption自身的 class 控制显隐，它必须依赖父级.carousel-item.active的状态才能同步；否则 JS 切换时文字会滞后或错位
为什么加了 transition 还是不动画
常见原因是选择器优先级不够，或者被 Bootstrap 默认样式覆盖。比如 .carousel-caption 在 Bootstrap 5 中默认没有 opacity 声明，浏览器从 1 直接跳到 0，transition 根本无从触发。
- 确保给
.carousel-caption显式设初始opacity: 0（非继承值），并在.carousel-item.active .carousel-caption里设opacity: 1 - 避免用
visibility: hidden替代opacity—— 它不可过渡，且会破坏可访问性 - 如果用了自定义类名（如
.my-caption），别漏掉对应状态选择器：.carousel-item.active .my-caption，否则动画只在第一张生效
小屏下文字动画错位或消失
不是动画本身坏了，而是 .carousel-caption 在 sm 断点以下默认 display: none，transition 被直接跳过。哪怕你写了 opacity: 0，它连渲染都没发生。
- 先解除隐藏：
@media (max-width: 767.98px) { .carousel-caption { display: block !important; } } - 再补上小屏专用动画偏移量：
transform: translateY(10px)（比桌面版更小，避免遮挡窄图） - 检查
.carousel-item是否有min-height—— 小屏图片高度塌陷时，top: 50%定位会失效，导致文字飞出可视区
data-bs-interval 和文字动画怎么配
文字动画时长必须和图片一致，且 data-bs-interval 仍要满足 ≥ transition-duration × 1000 + 100。否则文字刚淡到一半，下一张就切进来，出现半透明叠加或残留。
- 设文字动画为
0.3s→data-bs-interval="400"是底线，别设成350 - 不要单独给文字设更短的 duration（比如
0.15s）——它会抢在图片动画完成前结束，造成节奏割裂 - 如果禁用自动播放（
data-bs-interval="false"），手动切换时仍走同一套 transition，无需额外处理
