CSS 動畫旋轉是一種非常酷炫的方式，可以為網站添加一些現代、時尚的元素。在此你將學習到如何使用 CSS 中的旋轉屬性，以及如何將其與動畫效果結合使用。一起來學習吧！

/* 設置一個動畫 */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 將旋轉屬性應用于一個 div 元素 */
div {
width: 100px;
height: 100px;
background-color: red;
animation: spin 2s linear infinite;
}

如上代碼，我們首先設置了一個名為 `spin` 的動畫效果，它會將一個元素從 0 度旋轉到 360 度。接著，我們使用了 `animation` 屬性將這個動畫應用于了一個 `div` 元素。`animation` 屬性的值由四部分組成：動畫名稱（`spin`）、動畫持續時間（`2s`）、動畫類型（這里使用 `linear` 線性動畫）、動畫重復次數（`infinite`，表示永久循環）。

你還可以為這個動畫效果添加其他的屬性，如緩動效果、動畫延遲等等。下面是一個例子：

/* 設置一個緩動效果 */
@keyframes ease-in-out {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 將旋轉屬性應用于一個 span 元素 */
span {
display: inline-block;
width: 50px;
height: 50px;
background-color: blue;
animation: ease-in-out 3s cubic-bezier(0.42, 0, 0.58, 1) 1s infinite alternate;
}

如上代碼，我們為一個名為 `ease-in-out` 的動畫效果添加了緩動屬性 `cubic-bezier(0.42, 0, 0.58, 1)` ，它會在動畫開始和結束時變慢，動畫中間時變快。

另外，在 `animation` 的屬性值中，我們還添加了一個 `alternate` 屬性，表示在每次循環中顛倒播放動畫。這搭配上延遲屬性 `1s`，會使動畫效果更加出眾。

這就是 CSS 動畫旋轉的簡單介紹啦！你可以嘗試為你的網站添加一些時尚的元素，讓它們更加活力！