必须用steps(1)实现秒针滴答效果，通过animation: rotate 60s steps(1, end) infinite使每秒突变6°，配合transform-origin: center和@keyframes中0deg→360deg完整周期定义，切断过渡实现机械式跳变。
秒针滴答效果必须用
纯CSS实现秒针“滴答”式跳动，关键不是旋转动画本身，而是**切断过渡过程**。浏览器默认的
或
会让指针滑动，而真实机械秒针是每秒突变一次角度。必须用
让动画在每一帧只跳到下一个目标位置，不插值。
错误写法：
→ 指针匀速转圈，像分针
正确写法：
→ 每秒跳 6°（360° ÷ 60），停顿后再跳
中的
表示在每个周期结束时才跳变，视觉上更符合“秒末咔哒一声”的节奏
注意：不能用
，那会变成匀速微跳，失去滴答感
transform-origin 要设在表盘中心点
秒针元素通常是一条细长
steps(1)easelinearsteps(1)animation: rotate 60s linear infiniteanimation: rotate 60s steps(1, end) infinitesteps(1, end)endsteps(60)
，默认旋转原点是自身左上角。不调整的话，它会绕着左上角狂甩，根本不会绕表盘中心转。
必须显式设置：
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); }
，浏览器可能直接跳过动画，或者行为不可预测。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
必须写完整一圈：
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
微调启动时机
事情说清了就结束。真正难的不是写出那几行 CSS，而是想明白「滴答」的本质是离散跳变——一旦把 animation 当成连续运动来调，就全错了。