CSS 動畫可以讓網頁變得更加生動，吸引用戶的注意力。然而，有些時候我們希望這些動畫能夠重復執行，比如用戶點擊某個按鈕后，元素需要反復閃爍。但是在實際編寫中，我們會發現有些 CSS 動畫并不能重復執行，原因是什么呢？

/* 示例代碼 */
@keyframes shine {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
.elements {
animation: shine 2s linear;
}

以上代碼實現了一個簡單的動畫效果，元素會在 2 秒內從不透明度 0.2 漸變到 1，如果想要讓它重復執行，只需要添加以下代碼：

.elements {
animation: shine 2s linear infinite;
}

注意到了嗎？以上代碼中有 infinite 參數，它的作用是讓動畫無限重復執行。但是這種方法并不適用于所有的 CSS 動畫。

假設我們再次編寫一個動畫效果，元素在 2 秒內從初始狀態旋轉 180 度：

/* 示例代碼 */
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(180deg);
}
}
.elements {
animation: rotate 2s linear infinite;
}

運行以上代碼，你會發現元素只會執行一次旋轉，之后就不再轉動了。這是因為，當元素執行完最后一幀時，會馬上回到初始狀態，而無法繼續執行后續的動畫幀。

有時候，我們可以通過調整動畫幀之間的時間間隔來避免這個問題，讓動畫持續一段時間后再重新開始，如下所示：

/* 示例代碼 */
@keyframes spin {
0% {
transform: rotate(0);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
.elements {
animation: spin 4s linear infinite;
}

以上代碼定義了一個周期為 4 秒，分為三個階段的動畫效果，第一個階段從 0% 到 50% 旋轉 180 度，然后在接下來的 50% 到 100% 內繼續旋轉 180 度，最終回到初始狀態。這樣，我們就實現了一個能夠無限重復執行的動畫效果。

在編寫 CSS 動畫時，需要根據實際需要選擇合適的動畫效果和重復方式，避免出現意料之外的問題。