应避免使用 rotate(360deg) 作关键帧终点，因其与 rotate(0deg) 被浏览器视为等价导致硬切抖动；推荐用 rotate(720deg) 配合 infinite linear 和 transform-origin: center 实现平滑无限旋转。
为什么 transform: rotate() 直接写 360deg 会抖动
浏览器对 rotate(360deg) 和 rotate(0deg) 的数值处理是等价的，但动画引擎在循环衔接时可能因浮点精度或插值策略，在帧边界处重置角度值，导致视觉跳变。这不是 bug，而是 CSS 动画对「相同起止值」的优化行为——它会跳过中间计算，直接硬切。
- 避免用
0deg → 360deg作为关键帧范围 - 改用
0deg → 359.99deg或更稳妥的0deg → 720deg（两圈），让浏览器始终做线性插值 - 必须搭配
animation-timing-function: linear，否则 ease 类函数会在起点/终点减速，放大抖动感
用 @keyframes 实现真正平滑的无限扫描
核心是让旋转过程无断点、无插值歧义，且不依赖 transform-origin 意外偏移（默认是 center，但若元素有 border/padding 未归零，可能引发微位移）。
- 显式设置
transform-origin: center，防止继承干扰 - 关键帧写成：
from { transform: rotate(0deg); } to { transform: rotate(720deg); } - 动画声明必须含
infinite linear，缺一不可：animation: radar-scan 8s infinite linear - 别用
%写关键帧（如0%, 100%），某些旧版 Safari 对百分比 + 大角度组合解析异常
@@keyframes radar-scan {
from { transform: rotate(0deg); }
to { transform: rotate(720deg); }
}
.radar {
animation: radar-scan 6s infinite linear;
transform-origin: center;
}
雷达扫描线叠加与透明度控制的常见陷阱
纯色旋转扇形容易暴露锯齿或边缘闪烁，尤其在 Retina 屏或缩放页面下。直接用 background: conic-gradient() + opacity 动画会触发重绘，比 transform 性能差一个数量级。
- 扫描线建议用伪元素
::after单独承载旋转动画，主元素只负责底图 - 伪元素用
border-radius: 50%+clip-path: polygon()切出扇形，比 conic-gradient 兼容性更好（支持到 Edge 17+） - 避免在旋转元素上同时加
box-shadow或filter: blur()，这会让 GPU 合成层频繁切换，造成卡顿 - 若需淡入淡出效果，改用
mask-image配合渐变蒙版，而非 opacity 动画
响应式下旋转中心偏移导致“晃动”的修复
当容器宽高用 %、vw 或 flex 动态计算时，transform-origin: center 实际锚点可能因小数像素四舍五入而逐帧漂移，肉眼表现为轻微晃动。
- 给旋转容器设固定宽高（如
width: 200px; height: 200px），再用max-width: 100%保响应式 - 或强制开启硬件加速：
transform: rotate(0deg) translateZ(0)，让浏览器走 GPU 层，减少像素对齐误差 - 慎用
will-change: transform，仅在扫描区域进入视口后再动态添加，避免全局触发合成层开销
360deg 边界和 transform-origin 计算精度共同作用的结果。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
