本文详解如何使用纯 css 让元素（如文字）沿完美圆形轨迹匀速、无缝地运动，重点解决因初始位移导致的“跳变”问题，并提供可复用的代码模板与关键优化技巧。
要让元素（例如一段文本）沿圆形路径平滑运动，核心在于组合两次旋转（rotate）与一次径向位移（translateX），形成“容器旋转 + 子元素反向旋转抵消”的视觉效果。你原始代码中跳变的根本原因在于：.element 自身设置了 top:50%; left:50%; transform: translate(-50%,-50%)，而动画又在 from 帧中立即执行 translateX(150px)——这导致浏览器先应用定位偏移，再叠加动画起始位移，造成位置突变。
✅ 正确解法是分离定位职责：
- 使用 position: absolute 配合 top/left 将动画容器锚定在圆心；
- 动画本身仅负责“绕圆心旋转 + 外移 + 反向自旋”，不依赖父级 transform 干扰；
- 通过 animation-timing-function: linear 确保匀速运动；
- 添加 infinite 实现循环，forwards 保持终态（按需选择）。
以下是生产就绪的完整实现：
#spin {
position: absolute;
top: 50%; /* 圆心垂直居中 */
left: 50%; /* 圆心水平居中 */
width: 200px; /* 可选：控制容器尺寸 */
height: 200px;
margin: -100px 0 0 -100px; /* 负 margin 补偿宽高一半，精准锚定中心 */
animation: orbit 4s linear infinite;
}
@keyframes orbit {
from {
transform: rotate(0deg) translateX(150px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
/* 可选：为内部文本添加轻微自转校正，避免视觉倾斜 */
#spin p {
margin: 0;
transform: rotate(0deg); /* 初始方向归零 */
}<div id="spin"> <p>NEN</p> </div>
? 关键原理说明：
立即学习“前端免费学习笔记（深入）”；
- rotate(360deg)：使整个容器绕自身中心（即页面圆心）公转一周；
- translateX(150px)：将子元素沿 X 轴平移 150px（即圆半径），此时它位于圆周上；
- 末尾 rotate(-360deg)：对子元素施加反向自旋，抵消公转带来的文字旋转，使其始终朝向正前方（不歪斜）。
⚠️ 注意事项：
- 勿混用 transform: translate(-50%, -50%) 与 translateX() 动画：前者会干扰坐标系，引发跳变；
- 推荐使用标准 @keyframes 而非 -webkit- 前缀（现代浏览器已全面支持），仅在需兼容旧版 Safari 时补充；
- 半径值（如 150px）应与 margin 和容器尺寸协调，确保元素始终可见；
- 若需多个元素沿同一圆分布，可复制多个 #spin 并调整 animation-delay 或起始 rotate() 角度。
此方案无需 JavaScript，性能优异，且完全响应式——只需调整 translateX() 值和 animation-duration，即可自由控制轨道半径与运动速度。
