最稳的按钮加载旋转动画写法是：用@keyframes定义0%→100% rotate，通过class控制animation启停；必须同步处理disabled、aria-busy和loading class以保障可访问性与状态一致。
用 @keyframes 写一个按钮加载旋转动画，别碰 transform: rotate() 无限转
直接上最稳的写法：用 @keyframes 定义 0% → 100% 的 rotate()，再通过 animation 控制播放。关键不是“怎么转”，而是“怎么停”——很多同学加了 animation: spin 1s linear infinite 后，loading 结束时按钮还狂转，是因为没手动清掉动画。
实操建议：
- 动画名固定用
spin，方便统一管理（比如 JS 切换 class 时好写） - 别用
transform: rotate(360deg)单帧硬切，浏览器不会触发重绘，看起来不转 - 必须写
animation-timing-function: linear，否则默认ease会让旋转一顿一顿 - 示例代码：
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .btn-loading { animation: spin 1.2s linear infinite; }
Bootstrap 按钮加 loading 状态，优先改 disabled + aria-busy，不是只换文字
单纯把按钮文字改成“加载中…”是错的。用户还能点、屏幕阅读器不知道状态、键盘焦点卡住——这些都算可访问性事故。
正确做法是同步操作三件事：
- 加
disabled属性，阻止重复点击（Bootstrap 会自动降级样式） - 加
aria-busy="true"，告诉辅助技术“正在处理” - 用
data-original-text存原始文字，方便恢复（别用innerHTML硬塞，容易 XSS） - 加载结束时，**必须同时移除
disabled、aria-busy和 loading class**，漏一个都会出问题
JS 控制动画启停，用 classList.toggle() 而不是 style.animation 直接赋值
有人在 JS 里写 btn.style.animation = 'spin 1s infinite'，结果动画卡死或不触发。原因是内联 style 优先级太高，CSS 文件里的 animation: none 被覆盖不了，后续想停也停不掉。
安全做法永远走 class 控制：
- 定义两个 class：
.btn-spinning（带animation）和默认态（无动画） - 用
btn.classList.add('btn-spinning')启动，btn.classList.remove('btn-spinning')停止 - 如果要兼容旧版 Bootstrap（v4），注意
.btn:disabled默认有opacity，可能让旋转图标看不清，得额外加.btn-spinning { opacity: 1 !important; }
旋转图标位置不对？检查 display 和 vertical-align，不是动画本身的问题
常见现象：图标转着转着跑偏、上下跳、和文字不对齐。90% 是因为没处理好行内元素的基线对齐。
Bootstrap 按钮里放 <span class="spinner-border"></span> 或自定义 <i></i> 时：
- 确保父容器
line-height和字体大小匹配，否则旋转中心飘移 - 给旋转元素加
vertical-align: -0.125em（Bootstrap 5 spinner 的标准值），别用middle—— 它对齐的是父元素 x-height，不是视觉中心 - 如果用了
flex布局按钮内容，记得设align-items: center，不然图标会被 flex 自动拉伸变形 - 别在旋转元素上设
width/height为百分比，父容器尺寸未定会导致缩放抖动
aria-busy 和 disabled 的同步时机，一漏就进 WCAG 不合规名单。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
