齿轮动画需用 steps() 实现顿挫感而非 linear 匀速，选 24 步匹配常见齿数，配合 SVG 精确齿形、居中 transform-origin 和 ≥1.5s 时长，才能呈现真实“咔哒”机械节奏。
为什么直接用 animation-timing-function: linear 转不像是齿轮？
因为真实齿轮啮合转动时，齿与齿之间是“卡”着走的——每转过一个齿距，就停顿一下再跳到下一齿位。而 linear 是匀速过渡，视觉上像滑轮，不是齿轮。关键不在“转”，而在“顿”。steps() 就是干这个的：把一整圈动画切成离散步数，不插值、不缓动，纯机械式跳跃。
怎么用 steps() 实现齿感旋转？
核心是让旋转角度变化匹配齿数，并用 steps(n, end) 把一圈拆成 n 步。常见齿轮齿数为 12、16、20、24，选 24 齿较通用（兼容多数 SVG 或 CSS 绘制的齿轮图形）：
@keyframes gear-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<p>.gear {
animation: gear-rotate 2s infinite;
animation-timing-function: steps(24, end); /<em> 每齿占 1/24 圈，共 24 步 </em>/
}</p>
注意：steps(24, end) 表示在每一帧结束时才跳到下一步（即第 0 帧显示 0°，第 1 帧显示 15°，第 2 帧显示 30°……），这样顿挫感最清晰。若用 start，第一帧就跳到 15°，起始会漏掉静止态。
SVG 齿轮比纯 CSS 更准，但要注意 transform-origin 和路径精度
纯 CSS 画齿轮（比如用 border + clip-path）容易因抗锯齿或渲染精度导致齿边模糊，“顿”的边界不锐利。推荐用 SVG 定义精确齿形，再对其
-
... transform-origin: center（CSS 中写transform-origin: 50% 50%），否则旋转中心偏移，齿会“晃” - SVG 内部坐标若未居中（如 viewBox="0 0 100 100" 但齿轮路径从 (10,10) 开始），需先用
transform="translate(-50,-50)"校正中心 - 动画 duration 建议 ≥ 1.5s，太快会导致人眼无法分辨单步，顿挫变“抖动”
兼容性与性能提醒：别在低配设备上堆太多 steps() 值
steps(n) 在所有现代浏览器都支持，但 n 过大会增加重绘压力——尤其是同时动多个齿轮时。实测超过 steps(48) 在低端 Android WebView 中可能出现掉帧；steps(12)～steps(24) 是平衡点。另外，避免对 filter 或 box-shadow 同时做 steps 动画，GPU 不会加速这类属性的步进变换，会强制 CPU 渲染。
真正难的不是写对那几行 CSS，而是调出“咔哒”一声的节奏感：duration、steps 数、SVG 齿顶角三者得一起试，差 5° 或 0.1s 都可能从机械感变成故障感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
