必须设 transform-origin: center 且 animation: spin 4s linear infinite；转盘需明确宽高，唱针须结构分离避免误旋转；慎用硬件加速以防卡顿。
用 @keyframes 定义无限旋转动画时，别漏掉 transform-origin
唱片机转盘必须绕中心匀速自转，但默认 transform: rotate() 以元素左上角为原点。不显式设 transform-origin: center，转盘会“绕着角落打转”，视觉上像偏心飞出去。
关键点：
-
@keyframes spin只需两帧：0% { transform: rotate(0deg); }和100% { transform: rotate(360deg); }，浏览器会自动补间 - 必须给转盘元素（比如
<div class="record">）加transform-origin: center，且该元素需有明确宽高（不能靠内容撑开） - 若转盘是图片，记得设
img { display: block; }，避免底部默认留白导致视觉错位
animation 属性里这三个值缺一不可
只写 animation: spin 4s 不会循环——它默认只播一次。要无线循环旋转，必须同时指定持续时间、播放次数和运动曲线：
-
animation-duration：建议 3–6 秒，太快像电风扇，太慢失去“转动感” -
animation-iteration-count: infinite：这是实现“无线循环”的核心，漏掉就只转一圈 -
animation-timing-function: linear：必须用线性，否则转到 359° 时会“顿一下”再跳回 0°，破坏连贯性（ease等缓动会在头尾减速）
推荐写法：animation: spin 4s linear infinite;
立即学习“前端免费学习笔记（深入）”；
唱片针（tonearm）不能跟着转，得用嵌套容器隔离动画作用域
如果把唱针（一个 <div class="tonearm">）直接放在转盘元素内部，又给父容器加了 animation，唱针会被一起旋转——这不是效果，是 bug。
正确做法是结构分离：
<div class="record-player"> <div class="record"></div> <div class="tonearm"></div> </div>
然后只对 .record 应用动画，.tonearm 用绝对定位+伪元素模拟悬臂，且不继承旋转。常见错误是把 .tonearm 套在 .record 里，结果针也跟着疯转。
真机或低性能设备上卡顿？优先关掉 transform: rotateZ() 的硬件加速副作用
有些安卓 WebView 或旧版 Safari 会对 rotate() 强制触发 GPU 加速，反而导致掉帧。如果发现旋转抖动或发热严重，试试这个微调：
- 把
transform: rotate(360deg)换成transform: rotateZ(360deg)（部分引擎处理更稳） - 或者加一行
will-change: transform;到.record，提前告知渲染层准备 - 极端情况可降级：用
animation-timing-function: steps(360)配合 360 帧 keyframes，牺牲精度换流畅（不推荐，仅备用）
真正难的不是让图转起来，而是让转得像机械——匀速、无声、不晃动。大部分失败都卡在 transform-origin 没设对，或忘了 infinite。
