CSS動畫是一種讓網頁內容呈現動態效果的技術手段。在完成一次動畫后，我們常常希望能夠保留最后一幀的狀態，既可以提高用戶體驗，也可以讓頁面更加穩定。下面我們講解一下CSS動畫保留最后一幀的方法。

/* 以下是CSS代碼 */
animation-name: example;
animation-duration: 2s;
animation-fill-mode: forwards;

CSS動畫包括動畫名稱、持續時間和填充模式等要素。在以上代碼中，我們指定了動畫名稱為“example”，持續時間為2s，填充模式為“forwards”。

/* 以下是定義動畫的代碼 */
@keyframes example {
0%   { background-color: red; }
50%  { background-color: yellow; }
100% { background-color: green; }
}

這段代碼定義了“example”動畫。它將背景顏色從紅色過渡到黃色，再從黃色過渡到綠色。按照默認設置，動畫結束后元素將回到初始狀態。如果我們想要保留最后一幀的狀態，需要設置填充模式為“forwards”。

“forwards”填充模式的作用是在動畫結束時保留最后一幀的狀態。它會使得元素的最終狀態保持動畫結束時的狀態，而不是回到動畫開始之前的狀態。這使得我們可以在動畫結束時保持動畫的最終狀態，以便與后續元素進行交互。

CSS動畫保留最后一幀可以優化我們的網頁，讓用戶體驗更好。我們可以通過設置填充模式為“forwards”，來讓元素在動畫結束后保持最后一幀的狀態。在實際應用中，我們可以根據需要靈活運用這一技巧，提高網頁的視覺效果和用戶體驗。