用 rotate(1turn) 替代 rotate(360deg) 可避免角度插值跳变；加载条需 js 动态控制 rotate(${percent/100}turn)；safari 中应加 translatez(0) 和 align-items 修复错位；环形进度条推荐 svg 方案。
rotate 动画卡顿或跳变
直接写 transform: rotate(360deg) 做无限旋转，浏览器很可能在 0° 和 360° 交界处闪一下或顿一下——这不是 bug，是 CSS 动画对角度值做插值时的自然行为。浏览器会按最短路径补间，比如从 350° 到 10°，它可能走 -340° 而不是 +20°，导致逆向转动。
解决办法是绕过角度归零问题：
- 用
rotate(1turn)替代rotate(360deg)，turn单位天然支持连续累加，动画引擎不会尝试“折返” - 或者强制指定关键帧：从
rotate(0turn)→rotate(1turn)→rotate(2turn)，避免依赖起止值自动推导 - 加上
transform-origin: center（尤其当元素有 padding/border 时），否则旋转中心偏移会导致视觉抖动
加载进度条需要动态角度控制
纯 CSS @keyframes 只能做固定节奏动画，但加载条通常要响应真实进度（比如 0% → 73% → 100%）。这时候必须用 JS 控制 transform 内联样式。
关键点在于别直接拼字符串设 rotate：
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
el.style.transform = `rotate(${percent * 3.6}deg)`—— 百分比换算成度数易出浮点误差，且没处理 0°/360° 边界 - 推荐用
rotate(${percent / 100}turn)，更直观，也规避 deg 累积误差 - 如果进度条是半圆（如 0–180°），记得把
max设为 180，再映射：rotate(${percent * 1.8}deg)或更稳妥的rotate(${percent * 0.5}turn) - 更新频率高时（如每 50ms），加个
will-change: transform提前告知浏览器要动画，减少重排开销
rotate 在 Safari 上失效或错位
Safari 对 transform 的渲染策略更保守，尤其在 flex/grid 容器里嵌套旋转元素时，常出现旋转中心漂移、缩放失真或动画不触发。
常见诱因和对策：
- 父容器用了
display: flex且没设align-items，导致子元素基线对齐干扰transform-origin；显式加align-items: center或align-items: stretch - 元素本身有
border-radius+overflow: hidden，Safari 会截掉旋转后的部分；临时去掉overflow或用mask替代 - 动画未启用硬件加速：确保旋转元素有独立图层，可加
transform: translateZ(0)或will-change: transform - 不要用
rotate(-90deg)模拟竖排文字，Safari 对负角度解析不稳定；改用rotate(270deg)
用 rotate 实现环形进度条的结构陷阱
很多人想用单个 div + rotate 模拟环形进度，结果发现“缺口”位置不对、粗细不均、或无法响应式缩放。
根本问题是：CSS rotate 是整体变换，没法只转“弧段”。真正可行的方案只有两种：
- SVG 方案：用
<circle></circle>+stroke-dasharray+stroke-dashoffset，JS 控制 offset，rotate只用来微调起始角度（比如让 0% 从顶部开始） - CSS 伪元素叠加：主元素画底环，
::after画扇形遮罩并旋转，但需精确计算clip-path或用两个半圆拼接，兼容性差 - 切记别用
border+rotate搞“旋转边框”，这种 hack 在高 DPR 屏幕上锯齿严重，且无法抗锯齿
真正平滑、可控、可访问的环形进度，还是 SVG + transform: rotate() 配合 transform-origin 微调起始方向最稳。其他路子看着省事，调试两小时才发现是渲染管线的锅。
