必须用steps(1)实现秒针滴答效果，通过animation: rotate 60s steps(1, end) infinite使每秒突变6°，配合transform-origin: center和@keyframes中0deg→360deg完整周期定义，切断过渡实现机械式跳变。
秒针滴答效果必须用 steps(1)
纯CSS实现秒针“滴答”式跳动，关键不是旋转动画本身，而是**切断过渡过程**。浏览器默认的 ease 或 linear 会让指针滑动，而真实机械秒针是每秒突变一次角度。必须用 steps(1) 让动画在每一帧只跳到下一个目标位置，不插值。
- 错误写法：
animation: rotate 60s linear infinite→ 指针匀速转圈，像分针 - 正确写法：
animation: rotate 60s steps(1, end) infinite→ 每秒跳 6°（360° ÷ 60），停顿后再跳 -
steps(1, end)中的end表示在每个周期结束时才跳变，视觉上更符合“秒末咔哒一声”的节奏 - 注意：不能用
steps(60)，那会变成匀速微跳，失去滴答感
transform-origin 要设在表盘中心点
秒针元素通常是一条细长 <div>，默认旋转原点是自身左上角。不调整的话，它会绕着左上角狂甩，根本不会绕表盘中心转。
- 必须显式设置：
transform-origin: 50% 50%（或center center） - 如果秒针父容器是表盘，且已用
position: relative定位，那这个50% 50%是相对于父容器的中心 - 常见坑：写了
transform-origin但父容器没设position，导致百分比解析错位 - 更稳妥写法：
transform-origin: center（现代浏览器支持良好，语义也更直白）
@keyframes 里角度要从 0deg 写到 360deg，别偷懒写 0 → 0
CSS 动画需要明确起止状态才能计算步进。如果 keyframes 写成 0% { transform: rotate(0deg); } 100% { transform: rotate(0deg); }，浏览器可能直接跳过动画，或者行为不可预测。
- 必须写完整一圈：
0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } - 虽然视觉上起点终点一样，但这是告诉动画引擎“我要完成一次完整周期”，
steps(1)才能正确拆解为 60 次跳变 - 别用
rotate(-360deg)或其他等效写法，部分旧版 Safari 对负角度 + steps 组合支持不稳定
兼容性与性能要注意 will-change 和硬件加速
秒针每秒重绘一次，看似轻量，但在低端设备或复杂页面中，频繁 layout 可能引发掉帧。纯 transform 本该走 GPU，但某些场景下仍会触发软件渲染。
立即学习“前端免费学习笔记（深入）”；
- 加
will-change: transform提前提示浏览器该元素将变化，有助于启用硬件加速 - 避免同时对同一元素设置
top/left和transform，这会破坏合成层，让动画变卡 - IE 不支持
steps()函数（IE10+ 支持但有 bug），如需兼容，得降级为 JS 控制transform，CSS 方案只能放弃 - 移动端 Safari 对
steps(1)在低帧率设备上偶有首帧延迟，可加animation-delay: -0.1s微调启动时机
