Toast动画时间由CSS变量--bs-toast-animation-duration控制，其默认值为0.25s，影响显示和隐藏两个阶段；可通过:root重设、内联样式或Sass变量覆盖，需确保加载顺序和优先级正确。
Toast动画时间由哪个CSS变量控制
Bootstrap 5 的 .toast 动画时长不是写死在 keyframes 里，而是通过 CSS 自定义属性 --bs-toast-animation-duration 控制的。这个变量默认值是 0.25s，影响显示（fade-in）和隐藏（fade-out）两个阶段。
覆盖默认动画时长的三种可靠方式
必须确保你的 CSS 优先级高于 Bootstrap 原始样式。推荐按以下顺序尝试：
- 在引入 Bootstrap CSS 后，用
:root重设变量：:root { --bs-toast-animation-duration: 0.4s; } - 针对单个 toast 实例，内联设置：
<div class="toast" style="--bs-toast-animation-duration: 0.6s;">
- 如果使用 Sass，直接在
$toast-animation-duration变量处覆盖（需重新编译）
为什么改了变量但动画没变长
常见原因有三个：
- 你的 CSS 文件加载顺序在 Bootstrap 之前，
:root覆盖失效 - 用了
!important强行覆盖animation-duration，但没同步改transition-duration—— Toast 隐藏时依赖 transition，不改它会导致“闪退” - 浏览器缓存了旧的 CSS，特别是开发中启用了 HMR 但未触发热更新时
修改后要注意的兼容性细节
动画时长变长本身无兼容问题，但需留意：
立即学习“前端免费学习笔记（深入）”；
- Toast 的
delay属性（如data-delay="3000"）是从显示完成开始计时的，所以总停留时间 =animation-duration+delay，不是单纯加法 —— 实际延迟从 opacity 完全为 1 才开始 - 移动端 Safari 对
animation-timing-function较敏感，若同时自定义了--bs-toast-animation-timing，建议保持为ease-in-out，避免卡顿 - 若 toast 内容较多、渲染较慢，过短的
--bs-toast-animation-duration（比如0.1s）可能导致视觉上“跳帧”
