CSS动画是网页设计中常用的技巧之一，可以轻松地让页面更加生动、有趣。其中一种常见的动画效果就是元素的自转，下面我们一起来学习如何实现一个CSS动画自转。

/*首先，我们需要定义一个元素*/
.box {
width: 100px;
height: 100px;
background-color: #ff0000;
border-radius: 50%;/*将正方形变成圆形*/
animation: spin 2s infinite linear; /*定义动画名称、时长、循环次数、动画速度*/
}
@keyframes spin {
0% { transform: rotate(0deg); } /*起始状态*/
100% { transform: rotate(360deg); } /*结束状态*/
}

我们首先定义了一个.box元素，将其宽高设置为100px，背景颜色为红色，并使用border-radius将其变成一个圆形。接下来，我们定义了一个名为spin的动画，包含了动画名称、时长、循环次数、动画速度等属性。其中，linear表示动画速度为匀速，即会保持等速旋转。

在@keyframes中，我们定义了该动画的两个状态，即起始状态和结束状态。在起始状态下，我们将元素的旋转角度设置为0deg，即其初始位置不旋转；而在结束状态下，我们将元素的旋转角度设置为360deg，即完成一次完整的旋转。

最后，我们只需要将定义好的动画应用到元素上即可。我们通过animation属性，将.spin动画应用到了.box元素上，并设置它为无限循环，让它不停地自转起来。这样，我们就完成了一个简单的CSS动画自转的实现。