旋转动画卡顿需启用GPU加速，如加translateZ(0)或will-change；SVG锯齿应设shape-rendering="crispEdges"并确保整数尺寸比；Safari跳变须显式定义from/to关键帧；暂停恢复宜用class控制并防事件堆积。
旋转动画卡顿或不平滑怎么办
多数人直接写 transform: rotate(360deg) 加 animation: spin 1s linear infinite，但实际跑起来常有卡顿——根本原因是没启用硬件加速。浏览器默认用 CPU 渲染 transform，尤其在低端设备或复杂页面中，帧率容易掉到 30fps 以下。
- 强制开启 GPU 加速：在动画元素上加
transform: rotate(0deg) translateZ(0)或will-change: transform - 避免同时触发布局（layout）：不要在旋转元素上设置
width/height动态变化，也不要依赖margin或top/left做位移 - 使用
requestAnimationFrame替代 CSS 动画？没必要。CSStransform+will-change已足够高效，JS 控制反而增加调度开销
SVG 图标旋转时出现锯齿或发虚
SVG 在缩放或旋转时若未对齐像素网格，会触发抗锯齿渲染，导致边缘模糊。这不是 bug，是浏览器默认行为，但加载图标必须清晰。
- 给 SVG 根元素加
shape-rendering="crispEdges"或内联样式style="shape-rendering: crispEdges;" - 确保 viewBox 和实际尺寸成整数比，比如
viewBox="0 0 24 24"配合width="24"，避免width="23.5" - 如果用
<img src="icon.svg" alt="如何利用HTML实现图标旋转加载动画_通过CSS transform:rotate无限循环" >，锯齿更明显——改用内联 SVG，才能控制渲染属性
rotate 动画在 Safari 上突然跳回 0 度
Safari 对 @keyframes 中的 from/to 解析较严格，若只写 to { transform: rotate(360deg); }，部分旧版 Safari（≤15.6）会在循环起点重置为未变形状态，造成视觉跳变。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 显式写出完整关键帧：
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } - 更稳妥写法是用百分比：
0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } - 别省略
0deg—— 写成rotate(0)在某些 Safari 版本里会被忽略单位，等效于rotate(0rad)，结果不可控
需要暂停/恢复旋转动画时 DOM 操作失效
直接对元素设 element.style.animationPlayState = "paused" 看似可行，但若动画定义在外部 CSS 文件里，且用了 !important，内联样式可能被覆盖；更常见的是，React/Vue 等框架下频繁 toggle class 导致样式冲突。
立即学习“前端免费学习笔记（深入）”；
- 用 class 切换最可靠：
.spinner--paused { animation-play-state: paused !important; } - 暂停后想保持当前角度？CSS 本身不记录运行时角度，得用 JS 读取
getComputedStyle(el).transform解析矩阵，再设transform: rotate(Xdeg)冻结——但多数加载场景不需要这么精确 - 真正要小心的是：动画暂停期间用户反复点击触发多次 resume，可能堆积多个
animationstart事件，建议加节流或用el.animationName判断当前状态
