小屏下 Carousel 文字无默认显示动画，因其显隐依赖 display 切换而非 transition；需改用 opacity + visibility 配合 transition，并通过 .carousel-item.active .carousel-caption 触发，同时注意 will-change、字体加载及属性精简。
小屏下 Carousel 文字（.carousel-caption）本身**没有独立的“显示动画”**，它默认是静态显示/隐藏，靠 display: none 切换，不是 CSS transition 或 animate 控制的——所以你调 transition-duration 对文字出现/消失没用。真要加动画，得手动补。
为什么改 transition-duration 对文字无效
Bootstrap 的轮播切换动画只作用于 .carousel-item 及其子状态类（.active、.next、.prev），控制的是整个幻灯片的位移+透明度过渡。而 .carousel-caption 是绝对定位在图片上的普通块级元素，它的显隐由 display 控制，不参与 transform/opacity 过渡链。
- 即使你给
.carousel-caption加了transition: opacity 0.3s，它也不会自动 fade in/out，因为 Bootstrap JS 不会 toggleopacity或visibility，只切display - 浏览器对
display变化不触发 transition，这是 CSS 规范行为，不是 Bug - 想看到文字淡入淡出，必须把显示逻辑从
display改成opacity+visibility或pointer-events
如何让小屏文字有淡入淡出动画
核心是绕过默认的 display 控制，用 opacity 和 visibility 搭配 transition 实现可动画的显隐：
- 先重置默认隐藏：
.carousel-caption { display: block; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s step-end; } - 再用 JS 或伪类触发显示：Bootstrap 的
.active类只加在.carousel-item上，所以要用父子选择器：.carousel-item.active .carousel-caption { opacity: 1; visibility: visible; } - 为避免文字在非 active 项里意外可见，确保父容器
.carousel-item有overflow: hidden（Bootstrap 默认已设） - 如果用
transform做入场动效（比如从下往上滑入），需额外加transform: translateY(20px)初始态，再在.active里设transform: translateY(0)，并同步写进 transition
小屏下动画容易失效的三个坑
即使写了 transition，真机上仍可能卡顿或不触发：
-
will-change: transform必须加在.carousel-caption上，否则移动端 WebKit 可能跳过硬件加速，导致动画掉帧 - 字体加载延迟会让文字在动画开始后才渲染，看起来像“闪一下”，建议提前用
font-display: swap或内联关键字体 - 小屏设备内存紧张时，多个
.carousel-caption同时 transition 可能被浏览器降级为opacity单属性动画——别堆transform+opacity+color，保留最多两个属性
真正影响体验的不是动画快慢，而是文字是否在图片稳定后再开始动；小屏图片高度波动大，opacity 动画比 transform 更稳，优先用它。
