真实齿轮动画的关键是“每齿一顿”，需用 steps() 替代 linear 模拟啮合感；linear 连续插值导致平滑过头，丧失机械顿挫节奏；steps(24, end) 适配常见齿数，每步15°，起始静止、边界锐利、中心精准，才能呈现真实卡齿效果。
真实齿轮动画的关键不是“转得快”，而是“每齿一顿”——用 steps() 替代 linear 才能模拟啮合感，否则只是个滑轮。
为什么 animation-timing-function: linear 转得不像齿轮？
因为真实齿轮转动时，齿与齿之间是“卡住→跳变→再卡住”的离散过程，人眼能感知到微小停顿。而 linear 是连续插值过渡，视觉上平滑过头，失去机械节奏感。关键不在旋转本身，而在“顿”的时机和粒度。
steps(24, end) 怎么配齿数和动画时长？
选 24 是兼顾通用性与清晰度：常见 SVG 齿轮多为 12/16/20/24 齿，24 步能精准对应一整圈（360° ÷ 24 = 每步 15°），且在多数设备上渲染稳定。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
steps(24, end)表示第 0 帧显示 0°，第 1 帧跳到 15°，第 2 帧跳到 30°……最后一帧才回到 360°，起始有静止态，顿挫最自然 - 若用
steps(24, start)，第 0 帧就跳到 15°，漏掉初始咬合位，观感突兀 - 动画时长建议 ≥ 1.5s：太快（如 0.8s）会让单步持续时间低于人眼分辨阈值，顿变成抖；太慢（如 4s）则节奏拖沓
SVG 齿轮比纯 CSS 更可靠，但要注意三个硬性条件
纯 CSS 用 border + clip-path 拼齿轮，容易因抗锯齿、子像素渲染导致齿边模糊，“顿”的边界不锐利，观感打折。
- SVG 中必须设
transform-origin: center（或50% 50%），否则旋转中心偏移，齿会晃动 -
viewBox应居中定义（如viewBox="-50 -50 100 100"），若路径从(0,0)开始，需先用transform="translate(-50,-50)"校正中心 - 避免对
filter或box-shadow同时做steps()动画——GPU 不加速这类属性的步进变换，强制 CPU 渲染，低端 Android WebView 易掉帧
多个齿轮联动时，steps(n) 的 n 别超过 24
实测 steps(48) 在部分低端 Android WebView 中开始掉帧；steps(12) 虽更省资源，但齿感偏粗、不够细腻。12～24 是平衡点。同时动 3 个以上齿轮时，优先统一用 steps(24)，别混用不同步数——否则齿距错位，失去“咬合”错觉。
真正难的不是写出来，是让每个齿跳得准、停得稳、中心不飘。这些细节不调好，再炫的动画也只是个会转的圆盘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
