自身旋转
旋转元素，首先想到的就是rotate这个属性。
.circle {
width: 30px;
height: 30px;
background: #aaa;
animation: spin 3s linear;
}
@keyframes spin{
to {
transform: rotate(1turn);
}
}
绕圆旋转
rotate可以实现旋转，但只是绕自身旋转，是以其中心为圆心，进行旋转。如果想实现绕着一个圆进行旋转，则需要多用到一个属性了。
.container {
width: 300px;
height: 300px;
border: 1px dotted red;
border-radius: 50%;
position: relative;
box-sizing: border-box;
}
.circle {
position: absolute;
left: 50%;
top: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background: #aaa;
transform-origin: 0 150px;
animation: spin 3s infinite linear
}
如上代码，增加transform-origin这个属性&#