CSS動畫可以讓網頁更加生動。其中有一個問題是，在動畫結束時，元素會自動恢復到初始狀態。這在某些場合下不是我們想要的結果。為了解決這個問題，我們可以使用animation-fill-mode屬性。

animation-fill-mode屬性定義了在動畫之前和之后元素應該如何呈現。默認值是none，意味著動畫結束后元素會返回到初始狀態。但是，如果我們將其設置為forwards，元素將會留在動畫結束后的狀態。

.box {
width: 100px;
height: 100px;
background-color: blue;
animation-name: example;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes example {
from {
width: 100px;
}
to {
width: 500px;
}
}

在這個例子中，當動畫結束時，元素寬度會被設置為500px并保持在那里。如果我們沒有設置animation-fill-mode: forwards;，元素寬度將會回到100px。

如果我們想要元素在動畫結束前呈現動畫過程中的最后一幀，可以使用backwards。此時，元素將會在動畫開始前，呈現動畫的第一幀，然后在動畫結束時呈現動畫最后一幀。如果想要在兩個狀態之間跳轉，可以使用both。這個屬性值可以與其它的屬性值一起使用，實現更多可能性。