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動畫自轉的實現。