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;">
  <li>如果使用 Sass，直接在 <code>$toast-animation-duration</code> 变量处覆盖（需重新编译）</li>
  <h3>为什么改了变量但动画没变长</h3>
  <p>常见原因有三个：</p><div class="aritcle_card flexRow artxards">
  											<div class="artcardd flexRow">
  												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
  														src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
  												<div class="aritcle_card_info flexColumn">
  													<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
  													<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
  												</div>
  												<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
  												</a>
  											</div>
  										</div>
  <ul>
  <li>你的 CSS 文件加载顺序在 Bootstrap 之前，<code>:root</code> 覆盖失效</li>
  <li>用了 <code>!important</code> 强行覆盖 <code>animation-duration</code>，但没同步改 <code>transition-duration</code> —— Toast 隐藏时依赖 transition，不改它会导致“闪退”</li>
  <li>浏览器缓存了旧的 CSS，特别是开发中启用了 HMR 但未触发热更新时</li>
  </ul>
  <h3>修改后要注意的兼容性细节</h3>
  <p>动画时长变长本身无兼容问题，但需留意：</p>
  <ul>
  <li>Toast 的 <code>delay</code> 属性（如 <code>data-delay="3000"</code>）是从显示完成开始计时的，所以总停留时间 = <code>animation-duration</code> + <code>delay</code>，不是单纯加法 —— 实际延迟从 opacity 完全为 1 才开始</li>
  <li>移动端 Safari 对 <code>animation-timing-function</code> 较敏感，若同时自定义了 <code>--bs-toast-animation-timing</code>，建议保持为 <code>ease-in-out</code>，避免卡顿</li>
  <li>若 toast 内容较多、渲染较慢，过短的 <code>--bs-toast-animation-duration</code>（比如 <code>0.1s</code>）可能导致视觉上“跳帧”</li>
  </ul>
  <p>
  
  改动画时间看似简单，真正要稳，得盯住变量作用域、加载顺序、以及 fade-in 和 fade-out 两个阶段是否同步生效。</p>
  </div>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！