直接写死transform: rotate()会卡顿，因JS频繁重设style.transform触发主线程重排重绘；应改用CSS @keyframes动画或CSS变量+transition，配合will-change: transform启用GPU合成，确保全程走compositor线程。
为什么 transform: rotate() 直接写死角度会卡顿
浏览器对 transform 的硬件加速依赖于“可合成属性”，但若每次动画都靠 JS 频繁重设 style.transform = 'rotate(XXdeg)'，尤其在 requestAnimationFrame 里反复拼字符串，容易触发 layout → paint → composite 全流程，指针就会抖动或掉帧。
真正平滑的关键不是“转得快”，而是让浏览器全程走 compositor 线程，不牵扯主线程重排版。所以必须：用 CSS @keyframes 声明旋转逻辑，JS 只负责控制动画的 animation-play-state 或动态修改 --rotate 自定义属性（配合 will-change: transform）。
- 避免在 JS 中用
element.style.transform = `rotate(${deg}deg)`实时更新秒针 - 秒针建议用
steps(60, end)模拟真实跳秒（机械表感），或用cubic-bezier(0.42, 0, 0.58, 1)实现惯性滑入（石英表感） - 务必给指针元素加
transform-origin: bottom center（假设指针height向下延伸），否则旋转中心偏移会导致视觉漂移
如何用 CSS 自定义属性 + transition 驱动指针实时转动
纯 CSS 动画无法响应 JS 获取的实时时间，但可以通过 JS 更新一个 CSS 自定义属性，再由 transition 平滑过渡该属性值，间接驱动 transform。这是兼顾性能与实时性的折中方案。
核心链路：new Date() → 计算当前秒/分/时对应角度 → element.style.setProperty('--rotate', deg + 'deg') → CSS 中用 transform: rotate(var(--rotate)) + transition: --rotate 0.3s cubic-bezier(0.42, 0, 0.58, 1)。
立即学习“前端免费学习笔记（深入）”；
- 时针过渡时间建议设为
transition: --rotate 3s（避免突兀），分针1.5s，秒针不用transition（保持跳秒）或设0.1s（滑动秒针） - 必须声明
will-change: transform，否则部分浏览器（尤其是 Safari）不会启用 GPU 加速 - 注意：Firefox 对自定义属性的
transition支持较晚（≥ v115），旧版本需回退到animation+animation-delay微调
@keyframes + animation-delay 模拟连续秒针动画的陷阱
有人尝试用 60 帧 @keyframes 定义一圈旋转，再用 animation-duration: 60s 循环播放——看似完美，实则有严重偏差：系统时间与 CSS 动画计时器不同步，跑几小时后指针会明显滞后或超前。
更糟的是，animation-delay 无法动态重置起始偏移，导致每次重载页面后秒针“跳一大段”才归位。
- 绝对不要用
animation: spin 60s infinite直接驱动秒针 - 若坚持用
@keyframes，只用于时/分针的“基础转动”，再用 JS 每秒修正一次animation-delay值（例如el.style.animationDelay = '-' + secOffset + 's'） - 秒针必须由 JS 控制：每秒更新一次
--second-deg，并确保更新时机在requestAnimationFrame回调内，避开 16ms 帧边界误差
移动端 Safari 上指针旋转失真怎么办
Safari（尤其 iOS ≤ 16）对小角度旋转（如时针每分钟仅 0.5°）存在插值精度问题，常表现为指针“黏住不动”或突然跳变。这不是代码错，是 WebKit 渲染管线对 sub-pixel transform 的舍入策略导致。
缓解方式不是提高刷新率，而是绕过小角度计算：把整圈 360° 拆成 12 小时 × 60 分钟 = 720 个离散位置，用 calc() 和整数运算保证角度始终为 var(--hour) * 30 + var(--minute) * 0.5 这类确定表达式，再配合 transform: rotate(calc(var(--h-deg) * 1deg))。
- 禁用
transform: rotate(0.7deg)这类带小数的硬编码值，改用 CSS 计算（calc()）+ 整数变量 - 给指针容器加
backface-visibility: hidden，强制开启硬件加速层 - 测试时用真机连 Safari 开发者工具，看 Timeline 中是否出现“Raster”长任务——若有，说明仍在 CPU 渲染
CSS 时钟最难的从来不是“怎么转”，而是让每一帧都落在渲染管道最浅的那条路上。多数人卡在“看起来动了”，却没意识到浏览器正把它拖进重绘泥潭。
