本文详解如何用纯 css 让元素（如文字）沿完美圆形轨迹匀速、无缝地运动，重点解决初学者常遇的“起始/结束位置跳变”问题，并提供可复用的标准化方案。

实现元素沿圆形路径运动的核心原理是：利用嵌套旋转（rotate）抵消父级位移带来的方向偏转，使元素自身朝向始终一致（如正立），同时通过 translateX() 将其“甩出”到指定半径的圆周上。你原始代码中跳变的根本原因在于：transform: translate(-50%, -50%) 与动画中的 translateX(150px) 发生冲突，且未统一坐标系原点；此外，缺少 animation-timing-function: linear 会导致非匀速运动，加剧视觉突兀感。

✅ 正确做法如下（已兼容现代浏览器，无需 -webkit- 前缀）：

.circular-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 关键：将元素中心对齐到圆心 */
  transform: translate(-50%, -50%);
  /* 可选：确保不被裁剪 */
  pointer-events: none;
}

.circular-orbit > * {
  /* 重置子元素自身变换，避免继承干扰 */
  display: inline-block;
  transform: translate(0, 0);
}

/* 圆周运动动画：360°旋转容器 + 沿X轴平移 + 反向自旋抵消 */
@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

.orbiting-element {
  animation: orbit 4s linear infinite; /* linear 确保匀速，infinite 实现循环 */
}

<div class="circular-orbit">
  <span class="orbiting-element">NEN</span>
</div>

? 关键要点解析：

Expanso json-flatten

通过 CLI 或 MCP 服务器，使用 Expanso Edge 管道扁平化嵌套 JSON 对象。

下载

• ✅ position: absolute + top: 50%; left: 50%; transform: translate(-50%, -50%) 精准锚定圆心；
• ✅ translateX(150px) 定义圆周半径（单位可为 px、rem 或 %），数值即圆心到元素中心的距离；
• ✅ 外层 rotate() 控制轨道公转，内层反向 rotate(-360deg) 抵消旋转，使文字始终保持 upright（正立）；
• ✅ animation-timing-function: linear 是消除“加速-减速”跳变感的必要条件；
• ⚠️ 避免在 .orbiting-element 上额外设置 transform: translate()，否则会与动画 transform 合并导致偏移错乱；
• ? 若需多元素同步绕行不同半径，可为每个元素单独设置 translateX() 值，并共用同一 @keyframes。

该方案轻量、声明式、无 JS 依赖，适用于图标环绕、加载指示器、动态导航菜单等场景。只需调整 translateX() 和 animation-duration，即可快速适配任意尺寸与节奏需求。

立即学习“前端免费学习笔记（深入）”；