小屏下Carousel文字无独立动画速度可调，因其本身无transition或animation，仅随.carousel-item容器移动；需手动添加CSS动画并确保display: block才生效。
小屏下 Carousel 文字没有“动画速度”可调——.carousel-caption 默认不参与轮播切换动画，它只是个绝对定位的静态容器，本身没有 transition 或 animation。你看到的“文字跟着图片滑入滑出”，其实是父级 .carousel-item 的 transform 动画带动了整个子树（包括文字），文字本身并不单独做动效。
为什么改 transition-duration 对文字“动画”没反应
因为文字没独立动画逻辑：它随 .carousel-item 一起被 translateX 移动，视觉上“动”了，但不是自己在动。你调快 .carousel-item 的 transition-duration，文字确实会“更快地滑过”，但这属于容器带动，不是文字专属动画。
- 查 DevTools → 选中
.carousel-caption→ 看Computed里的transition，基本是none - 文字若加了
opacity或transform类（比如animate__fadeIn），那才是真动画，才需要调时长 - Bootstrap 5 默认连
.carousel-caption的display都只在 ≥768px 生效，小屏下它压根不渲染，更谈不上动画
想让小屏文字有入场动画？得自己加
Bootstrap 不提供 caption 入场动画，必须手动加 CSS 动画或 JS 控制。常见做法：
- 用
@keyframes写一个淡入+上浮：@keyframes captionIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .carousel-caption { animation: captionIn 0.4s ease-out forwards; } - 确保小屏下
.carousel-caption是display: block（否则动画不触发） - 动画不能写在
@media (max-width: 575.98px)外层，否则大屏也会动；要包裹进媒体查询里 - 避免和轮播本身的
transform冲突：给.carousel-caption加will-change: transform提前升层
文字“动得太慢”或“卡顿”，真正瓶颈在这儿
不是动画时长设错了，而是小屏下布局不稳定导致渲染压力大：
-
.carousel-item没设min-height，图片高度塌缩后，文字定位锚点失效，浏览器反复重排重绘 - 文字用了
font-size: 16px这种固定值，系统放大字号后撑破容器，触发布局抖动 - 多个
.carousel-caption同时运行动画，没加transform: translateZ(0)或will-change，GPU 加速没启用 - 用了
top: 50%; transform: translateY(-50%)居中，但父容器高度波动大，导致动画起始位置跳变
小屏文字动画真正的复杂点不在“怎么设 0.3s”，而在“怎么让它每次都在稳定上下文里动起来”。先 fix 定位和容器高度，再加动画，否则再快的 duration 也看着卡。
