bootstrap如何设置图标（Icons）的旋转动画-Bootstrap教程-PHP中文网

Bootstrap 5 中 SVG 图标旋转需自定义 CSS 动画，因已移除 animate-spin；推荐使用内联 SVG + @keyframes spin + transform-origin: center，并确保尺寸固定、timing-function 为 linear。

Bootstrap 5 怎么让 `svg` 图标转起来

bootstrap 本身不提供图标旋转动画的内置类，它只管布局和组件样式；图标得靠你自己加 css 动画。如果你用的是 bootstrap 官方推荐的 bootstrap-icons（svg 字体或 svg sprite），那动画得自己写，别指望 class="bi bi-arrow-clockwise" 自带旋转。

常见错误是直接给 <i class="bi bi-arrow-clockwise"></i> 加 class="animate-spin"——这会失败，因为 Bootstrap 5 已经移除了 animate-spin 这类工具类（那是 Bootstrap 4 的遗留物）。

用 bootstrap-icons 的 SVG 图标时，确保它是内联 SVG（即 <svg>...</svg>），不是字体图标（<i></i> + font-face）；只有内联 SVG 才能可靠加 transform 动画
字体图标（<i></i>）也能转，但得用 transform: rotate() 配合 animation，且要设 display: inline-block，否则 transform-origin 行为异常
别在图标上直接写 style="animation: spin 1s linear infinite" —— 把动画定义在 CSS 里更可控、可复用

怎么写一个靠谱的旋转动画 CSS 规则

最简可用的旋转动画就两行关键 CSS：定义 @keyframes + 给元素加 animation。重点不是“怎么动”，而是“绕哪转”和“会不会卡顿”。

常见坑是没设 transform-origin，导致图标绕左上角转，看起来像飘走；或者用了 rotate(360deg) 却没加 transform-box: fill-box（对 SVG 路径无效），结果路径自身变形。

推荐写法：

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

如果图标是内联 <svg></svg>，加 width/height 固定尺寸，否则动画中缩放可能抖动
避免用 animation-timing-function: ease 做旋转——线性（linear）才自然；ease 会让转速忽快忽慢，看着像卡顿

用 `bootstrap-icons` 的 SVG sprite 时怎么加旋转

如果你通过 <svg><use href="bootstrap-icons.svg#bi-arrow-clockwise"></use></svg> 引入图标，那 <use></use> 元素本身不能直接加动画，必须把 animation 放在包裹它的 <svg></svg> 上，且需显式设置 transform-box: fill-box 才能让旋转中心对齐图标视觉中心。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

典型错误是只给 <use></use> 加 class，结果动画没生效；或者没设 viewBox，导致旋转时图标被裁切。

必须保证外层 <svg></svg> 有 viewBox（如 viewBox="0 0 16 16"），且宽高一致（如 width="1em" height="1em"）
动画 class 加在 <svg></svg> 上，不是 <use></use>：<svg class="spinner" viewbox="0 0 16 16"><use href="icons.svg#bi-arrow-clockwise"></use></svg>
如果旋转偏心，加 transform-origin: 50% 50% 到 .spinner，比 center 更稳妥

旋转动画在 Safari 和旧版 Edge 上失效怎么办

Safari 15.4 之前、Edge 18 及更早版本对 SVG 的 transform 动画支持不完整，尤其当 <use></use> 指向外部文件时，transform-origin 可能被忽略，图标原地乱转。

这不是代码写错了，是渲染引擎限制。绕过方式很务实：不用 <use></use>，改用内联完整 SVG，或者降级为 CSS 字体图标 + inline-block + 显式 transform-origin。

内联完整 SVG 最稳：<svg class="spinner" width="1em" height="1em" viewbox="0 0 16 16"><path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"></path></svg>
字体图标方案（兼容性最强）：<i class="bi bi-arrow-clockwise spinner-font"></i> + CSS 中加 .spinner-font { display: inline-block; animation: spin 1s linear infinite; }
别依赖 will-change: transform 强制硬件加速——在低配 iOS 设备上反而更卡

真正麻烦的不是写几行 CSS，而是得判断你用的是哪种图标加载方式、目标浏览器版本、以及要不要为老设备多维护一套 fallback。这些细节一漏，动画就在某台 iPad 上静止不动。