CSS動畫是網頁中必不可少的元素，能夠豐富頁面效果和增強用戶體驗。本文將介紹如何使用CSS寫一個簡單的圓形旋轉動畫。

/* 定義動畫樣式 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 定義圓形樣式 */
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #000;
}
/* 添加動畫 */
.circle.rotate {
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

首先，定義一個名為“rotate”的動畫樣式，包括從0度旋轉到360度的變化。接著，定義一個圓形樣式，包括寬度、高度、圓角和背景顏色。最后，通過添加class名為“rotate”的元素來添加動畫，同時指定動畫名稱、持續時間、迭代次數和時間函數。

在HTML中，添加一個class名為“circle”的div元素即可實現圓形的顯示。在需要添加動畫的時候，通過添加class名為“rotate”的類名即可啟用動畫效果。

<div class="circle"></div>
<div class="circle rotate"></div>

添加CSS動畫不僅能夠豐富網頁效果，還可以增強用戶體驗。通過學習簡單的CSS動畫，我們可以為網頁增加更多的互動元素。