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>+ font-face）；只有内联 SVG 才能可靠加 transform 动画 - 字体图标（
<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>，加width/height固定尺寸，否则动画中缩放可能抖动 - 避免用
animation-timing-function: ease做旋转——线性（linear）才自然；ease会让转速忽快忽慢，看着像卡顿
用 bootstrap-icons 的 SVG sprite 时怎么加旋转
如果你通过 <svg><use href="bootstrap-icons.svg#bi-arrow-clockwise"></use></svg> 引入图标，那 <use> 元素本身不能直接加动画，必须把 animation 放在包裹它的 <svg> 上，且需显式设置 transform-box: fill-box 才能让旋转中心对齐图标视觉中心。
典型错误是只给 <use> 加 class，结果动画没生效；或者没设 viewBox，导致旋转时图标被裁切。
- 必须保证外层
<svg>有viewBox（如viewBox="0 0 16 16"），且宽高一致（如width="1em" height="1em"） - 动画 class 加在
<svg>上，不是<use>：<svg class="spinner" viewBox="0 0 16 16"><use href="icons.svg#bi-arrow-clockwise"/></svg> - 如果旋转偏心，加
transform-origin: 50% 50%到.spinner，比center更稳妥
旋转动画在 Safari 和旧版 Edge 上失效怎么办
Safari 15.4 之前、Edge 18 及更早版本对 SVG 的 transform 动画支持不完整，尤其当 <use> 指向外部文件时，transform-origin 可能被忽略，图标原地乱转。
这不是代码写错了，是渲染引擎限制。绕过方式很务实：不用 <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"/></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 上静止不动。
