在我们的基础样式中，在.ball上增加transform-origin: 300px center;属性，就可以帮我们把旋转的圆心向右移动300px（图中红色区域）。
再通过上面实现的旋转动画，即可实现圆周运动。具体实现代码如下：
<divclass="container">
<divclass="ball"></div>
</div>
.ball{
top:50%;
margin-top:-25px;
transform-origin:300pxcenter;
animation:rotate8slinearinfinite;
}
@keyframesrotate{
to{
transform:rotate(1turn);
}
}
方法3: motion path
前面两个方法相对比较常见，我们的第三种方法将会用到前面提到css属性motion path。
我们的题目中是在圆周运动，因此，还可以单纯通过animation和transform属性来完成效果，如果我们的题目变更成了要去实现一条复杂的曲线就会很僵硬，比如下面的路径。
为了解决上面的问题，2015年W3C提出了CSS路径动画相关的草案，也就是我们现在准备要使用的motion path。其中包括了5个属性：
- offset-path：运动路径
- offset-anchor：运动元素的锚点位置
- offset-position：定了路径本身的初始位置
- offset-distance：运动元素在路径上的位置
- offset-rotate：对象的旋转角度或是如何自动旋转
其中，offset-path接收path()、url()、ray()、none等值。这里的path()是使用SVG坐标语法定义的路径字符串。那我们的问题就变得简单了，只需要找到在svg中如何实现圆环路径即可。
下面是我们找到的SVG中实现一个圆环路径的代码，其中cx、cy代表圆形的坐标, r代表圆的半径，填入对应的值即可生成我们想要的圆环路径M 300, 300 m -275, 0 a 275,275 0 1,0 550,0 a 275,275 0 1,0 -550,0。
<path d="
M cx cy
m -r, 0
a r,r 0 1,0 (r * 2),0
a r,r 0 1,0 -(r * 2),0
"/>
在实现完轨迹之后，我们还需要通过控制offset-distance的值让我们的圆在我们画出来的圆环路径上动起来。
具体实现代码如下：
<divclass="container">
<divclass="ball"></div>
</div>
.ball{
offset-path:path('M300,300m-275,0a275,27501,0550,0a275,27501,0-550,0');
animation:move3000mslinearinfinite;
}
@keyframesmove{
0%{
offset-distance:0%;
}
100%{
offset-distance:100%;
}
}
