animation: spin 1s linear infinite 是核心写法，需同时满足动画名存在、时长明确、linear 和 infinite 缺一不可；@keyframes spin 必须完整定义 0%→100% 旋转；视觉缺口依赖 border-top-color 与 border-radius: 50% 组合；仅用 transform 和 opacity 可保障 GPU 加速；duration 应设为接口平均响应时间的 0.7–0.9 倍。
animation: spin 1s linear infinite 是核心写法
必须同时满足三个条件：动画名存在、时长明确、linear 和 infinite 缺一不可。漏掉 infinite 就只转一圈，漏掉 linear 默认用 ease，开头结尾变慢，看起来像“卡住再启动”。
常见错误包括：animation: spin 1s（没写循环）、animation: spin 1s infinite（缺 linear）、或把 infinite 写成字符串 "infinite"（实际是关键字，不加引号）。
-
@keyframes spin必须从0%到100%定义完整旋转，哪怕只是transform: rotate(0deg)→rotate(360deg) - 如果用
to替代100%，也得配from，否则某些旧版 Safari 可能不渲染 - 动画名大小写敏感，
spin和Spin是两个不同动画
border-top-color + border-radius: 50% 才出缺口旋转效果
纯 border: 2px solid #ccc 会转出实心圆环，看不出旋转；必须只设顶部边框颜色不同，并配合圆形裁剪，才能形成“旋转扇叶”感。
关键样式组合：border-radius: 50% 确保是正圆，border: 2px solid #eee 设底色，再单独覆盖 border-top-color: #007bff。少任何一条，视觉上就失去 loading 的节奏提示。
立即学习“前端免费学习笔记（深入）”；
- 别用
box-shadow模拟缺口——它不随 transform 旋转，会错位 - 避免在
.loading上设width/height为auto，否则 inline 元素可能塌缩，动画不触发 - 移动端建议最小尺寸不小于
16px，否则高 DPR 屏幕下看不清旋转细节
transform 和 opacity 是唯二推荐的动画属性
用 width、height、left、top 或 color 做 loading 动画，大概率触发重排（reflow）或重绘（repaint），尤其在低端安卓机上掉帧明显。
transform（含 rotate、scale、translate）和 opacity 走的是合成层（compositor），浏览器能用 GPU 加速，帧率稳定在 60fps。
- 想做呼吸效果？用
opacity: 0.3 → 1，别用background-color渐变 - 进度条类 loading 可用
transform: scaleX()替代width百分比变化 - 真要改颜色，优先用
filter: hue-rotate()，比直接改color更轻量
animation-play-state: paused 适合交互控制，但别靠 animationiteration 事件计数
需要用户点击暂停/恢复 loading 动画时，animation-play-state: paused 比删 class 或改 animation: none 更可靠——它不破坏原有动画配置，恢复时能接续播放。
但千万别监听 animationiteration 事件来判断“第几次循环”，因为 infinite 下该事件在 iOS Safari 和部分 Android WebView 中根本不触发，且快速 toggle 时容易丢失。
- 精确控制节奏？用
setInterval+ 时间戳模拟，更可控 - SSR 场景下首屏可能闪一下再动，加
animation-delay: 0.01s错开 JS 渲染时机 - 多个 loading 同时存在时，避免全用相同
animation-duration，微调 0.05s 差异可减少视觉同步抖动
animation-duration 设为接口平均响应时间的 0.7–0.9 倍，观感最自然。 
