用@keyframes实现不卡顿旋转加载动画需三点：设transform-origin:center；动画时长≥500ms；加will-change:transform或translateZ(0)触发硬件加速。
怎么用 @keyframes 做一个不卡顿的旋转加载动画
纯 CSS 实现的旋转加载动画，核心是让元素绕中心匀速转圈，但直接写 transform: rotate(360deg) 容易卡顿或跳帧。关键在三点：用 transform-origin: center 锁定旋转中心；动画时长设为 500ms 以上（太短浏览器来不及渲染）；必须加 will-change: transform 或 transform: translateZ(0) 触发硬件加速。
常见错误现象：rotate() 动画在 Safari 里一卡一卡、Chrome 里边缘发虚、旧版 Android 浏览器完全不动。
- 优先用
transform: rotate()，别用animation: spin 1s linear infinite配border-radius: 50%模拟——那是假圆，不是真旋转 - 动画名别叫
spin，有些框架会冲突，建议用loading-rotate这类带业务前缀的 - 如果容器本身有
overflow: hidden，记得给动画元素加margin: -2px防止边缘裁切
为什么边框动画比 SVG 更适合多数场景
用 border + border-radius: 50% 做环形加载，本质是靠四条边框的渐进显示来“骗”出旋转感。它比 SVG <circle></circle> + stroke-dasharray 更轻量、兼容性更好（IE10+ 都行），且不用处理 viewBox 和单位换算。
使用场景：按钮 loading 状态、列表骨架屏、表单提交中提示。不适合需要精确控制旋转角度（比如进度 30%）或要叠加图标的情况。
立即学习“前端免费学习笔记（深入）”；
-
border: 3px solid #eee和border-top-color: #007bff是最简配对，别用border-color: transparent transparent #007bff transparent—— 语义不清还容易漏写 - 边框宽度影响视觉速度：
border-width: 2px转起来比4px显得快，因为“扫过”的面积小 - 不要给边框加
box-shadow，iOS 上会导致动画掉帧
移动端适配时最容易被忽略的两个 CSS 属性
响应式加载动画在手机上缩放后常出现模糊、错位或停转，问题通常不出在 @keyframes，而在容器层。
常见错误现象：iPhone 上动画变慢一半、安卓折叠屏里圆圈变成椭圆、横屏后旋转中心偏移。
- 父容器必须设
font-size: 0或line-height: 0，否则 inline 元素默认基线对齐会吃掉垂直空间，导致transform-origin失效 - 动画元素本身加
vertical-align: middle，不然在 flex 容器里可能上下浮动 - 避免用
%或em设宽高，一律用rem或px，配合viewportmeta 标签做基础缩放控制
如何让动画在低性能设备上依然保持流畅
老款安卓机、低端 iPad 或开启“减少动画”系统设置的设备，会直接禁用 transform 动画。不能只依赖 CSS，得留个降级出口。
性能影响：开 3 个以上同页面 @keyframes 加载动画，未优化时 FPS 可能从 60 掉到 20+。
- 用
@media (prefers-reduced-motion: reduce)主动关闭动画，改用静态文字 “加载中…” - JavaScript 检测
window.matchMedia('(prefers-reduced-motion)')状态，动态增删loadingclass - 别在一个页面堆 5 个不同颜色的加载动画——复用同一套 keyframes，只改
border-top-color
复杂点在于：动画是否启用，不只是看浏览器支持，还得看用户系统设置和当前设备负载。别假设“写了就一定转”。
