隨著時代的進步，前端技術也在不斷地發展。在 CSS3 中，引入了非常酷炫的動畫效果，其中就包括刷新動畫。刷新動畫是一種很常見的 UI 元素，可以讓用戶對網絡交互的過程有更好的感知和體驗。

在 CSS3 中實現刷新動畫也非常簡單。我們可以通過使用關鍵幀動畫，定義兩個不同的狀態，再利用 transition 屬性實現平滑的過渡效果，最終達到當用戶鼠標懸停在刷新按鈕上時，出現旋轉效果的效果。

.refresh {
display: inline-block;
padding: 12px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease-in-out;
}
.refresh:hover {
transform: rotate(360deg);
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}

在這段 CSS 代碼中，我們首先定義了 refresh 類，它是一個圓形按鈕，并設置邊框圓角以及陰影。在 :hover 偽類下，我們定義了一個新的 transform 值 rotate(360deg)，當用戶鼠標懸停在刷新按鈕上時，就會觸發旋轉效果。

同時，通過使用關鍵幀動畫，我們可以定義兩個不同的狀態：從 0 度旋轉到 360 度旋轉。將關鍵幀動畫與按鈕的 transform 屬性合并，就可以實現最終的刷新動畫效果。

總之，刷新動畫是一個非常常見且重要的 UI 元素。在 CSS3 中實現刷新動畫非常簡單，只需定義一個新的關鍵幀動畫，然后使用 transition 屬性實現平滑的過渡。希望這篇文章對你有所幫助，讓你更加熟練地掌握 CSS3 刷新動畫的實現方法。