文字渐显必须作用于.carousel-item而非.carousel-caption，因bootstrap 5轮播依赖transform和visibility控制显隐，后者会覆盖opacity过渡；需禁用carousel-fade，改用自定义类并确保定位上下文与渲染优化对齐。
文字渐显必须用 carousel-item 作为动画作用域
直接给 .carousel-caption 加 opacity 动画会失效，因为 Bootstrap 5 的轮播切换依赖 transform: translateX() 和 visibility: hidden 控制显隐，而 visibility 会覆盖 opacity 的过渡效果。必须把动画逻辑绑定到 .carousel-item 上，让文字随当前项一起进入/退出。
实操建议：
- 不要单独给
.carousel-caption设animation或transition - 在
.carousel-item上添加transition: opacity 0.6s ease-in-out（时长需与 Bootstrap 默认transition-duration一致） - 用
.carousel-item.active触发显示态：opacity: 1；其他项设opacity: 0，并加pointer-events: none防止遮挡点击 - 若需淡入同时带位移，可叠加
transform: translateY(20px)初始值，再在.active中重置为transform: translateY(0)
carousel-fade 类不能和文字渐显混用
Bootstrap 5 的 carousel-fade 是全局切换模式，它会让所有 .carousel-item 共享同一个 opacity 过渡，导致文字在非激活项上“透出”或闪烁——尤其当多张图文字高度不一致时，视觉层叠错乱。
正确做法是禁用 carousel-fade，改用自定义类，例如：
.carousel-custom-fade .carousel-item {
opacity: 0;
transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}
.carousel-custom-fade .carousel-item.active {
opacity: 1;
transform: none;
}
然后在 HTML 中写：<div class="carousel slide carousel-custom-fade">
<h3>文字容器必须脱离文档流才能稳定触发动画</h3>
<p>如果 <code>.carousel-caption 仍受父容器 height 或 flex 布局影响，动画过程中可能被截断、错位，甚至因重排导致帧率骤降。
关键修复点：
- 给
.carousel-caption显式设position: absolute（不是relative） - 确保其父容器（即
.carousel-item）有position: relative—— Bootstrap 5 默认已设，但若你用了.ratio或自定义 wrapper，得手动补上 - 避免在
.carousel-caption内使用margin控制位置，改用top/bottom+transform - 若文字内容动态加载，需等 DOM 插入后再触发动画，否则首帧可能跳过渐显
移动端 Safari 和旧版 Chrome 会跳过 opacity 过渡
部分 iOS 15 以下 Safari 和 Android Chrome 80 之前版本，对 opacity 在 transform 容器内的硬件加速支持不完整，表现为：第一张正常，后续切换时文字直接闪现、无过渡。
绕过方案：
- 强制开启 GPU 加速：
.carousel-item { will-change: opacity; } - 用
filter: opacity(0)替代opacity: 0（兼容性略好，但性能稍差） - 在
.carousel-item.active中加backface-visibility: hidden，防止渲染管线优化误删过渡帧 - 不要依赖
animation-fill-mode: forwards来维持最终态，它在某些 WebView 中不可靠；始终用 CSS 类控制终态
@keyframes，而是让动画节奏、定位上下文、渲染管线三者对齐——漏掉任意一环，用户看到的就是卡顿、错位或干脆没反应。
