本文详解如何使用纯 css 让任意元素（如文字）沿完美圆形轨迹匀速、无缝地运动，重点解决初始/结束位置跳变问题，并提供可复用的代码模板与关键原理说明。
要让一个 HTML 元素（例如 NEN）沿圆形路径平滑运动，核心在于将旋转（rotate）与位移（translateX）组合应用在同一个变换原点上，而非简单地用 transform: translate(-50%, -50%) 居中后直接动画——这正是原始代码出现“跳变”的根本原因：动画起始时 translateX(150px) 突然将元素从中心拉到圆周，导致视觉断层。
✅ 正确解法是采用 “旋转容器 + 固定偏移” 的双层变换策略：
- 将元素置于绝对定位的父容器中，使其变换原点精确落在圆心；
- 通过 rotate() 驱动整个坐标系旋转，再用 translateX(r) 将元素“甩出”至半径 r 处；
- 最后用反向 rotate(-θ) 抵消文字自身旋转，保持内容始终正立（可选）。
以下是生产就绪的完整示例（兼容现代浏览器，已去除冗余 -webkit- 前缀）：
.circular-orbit {
position: absolute;
top: 50%;
left: 50%;
/* 圆心锚点：通过 margin 调整使 transform-origin = (0, 0) 对应页面中心 */
margin: -75px 0 0 -75px; /* 假设元素宽高各150px；若为文字，可改用 transform: translate(-50%, -50%) */
animation: orbit 4s linear infinite;
}
@keyframes orbit {
from {
transform: rotate(0deg) translateX(150px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
<div class="circular-orbit"> <span style="display: inline-block; white-space: nowrap;">NEN</span> </div>
? 关键要点解析：
- translateX(150px) 中的 150px 即圆周半径，可根据需求调整；
- rotate(360deg) 作用于整个变换链，使元素绕父容器中心公转；
- 末尾的 rotate(-360deg) 是抵消旋转，确保文字不随轨道自转（删除它可获得“滚动文字”效果）；
- 使用 animation-timing-function: linear 保证匀速运动，避免缓动导致的速度不均；
- infinite 实现循环，forwards 在单次动画中非必需（因已循环），但若需单次执行，务必保留 forwards 以维持最终状态。
⚠️ 注意事项：
- 元素必须脱离文档流（position: absolute/fixed），否则 top/left 与 transform 可能冲突；
- 若文字过长导致换行，添加 white-space: nowrap 和合适 display（如 inline-block）防止布局塌陷；
- 响应式场景下，建议用 vw/vmin 替代固定像素值（如 translateX(20vw)），提升适配性；
- 如需多元素同步绕同一圆心运动，可统一设置父容器为 transform-origin: center，子元素分别设置不同 animation-delay。
通过该方法，你不仅能消除跳变，还能灵活控制半径、速度、方向（反转 to 中的旋转角度符号即可逆时针），真正实现专业级 CSS 圆周动画。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
