如何让 Bootstrap 图标在 Vue 3 中持续旋转动画

本文详解解决 Bootstrap Icons 在 Vue 3 + Bootstrap 5.3 环境下无法持续旋转的问题，指出关键原因（display 值缺失与 !important 干扰），并提供可立即生效的纯 CSS 动画方案。 本文详解解决 bootstrap icons 在 vue 3 + bootstrap 5.3 环境下无法持续旋转的问题，指出关键原因（`display` 值缺失与 `!important` 干扰），并提供可立即生效的纯 css 动画方案。在基于 Vue 3 和 Bootstrap 5.3 的项目中，开发者常尝试通过 CSS @keyframes 实现图标的连续旋转效果（如加载指示器、状态提示等），但常遇到动画完全不触发的情况。问题往往并非出在动画逻辑本身，而是被忽略的底层渲染行为细节。根本原因分析HTML 中的 <i> 标签默认为 display: inline 元素，而 CSS 的 transform 属性在 inline 元素上不会触发视觉变换（除非该元素具有布局上下文，如设置了宽高、行内块或绝对定位）。此外，!important 在 @keyframes 规则中不仅无效，还可能干扰浏览器对关键帧样式的解析，导致整个动画被静默丢弃。正确实现方案只需两处关键修正，即可让图标平滑、无限旋转：将图标设为 display: inline-block（或 block/flex 等具备尺寸感知能力的显示模式）； 移除 @keyframes 内所有 !important 声明，并确保 animation 属性语法顺序规范（推荐：animation: name duration timing-function iteration-count）。以下是完整、可直接复用的代码示例： Vozo Vozo是一款强大的AI视频编辑工具，可以帮助用户轻松重写、配音和编辑视频。