在CSS動畫中，我們經(jīng)常需要將動畫停留在最后一幀，以達到更好的效果。下面介紹兩種方法來實現(xiàn)這一目的。

// 方法1：使用animation-fill-mode屬性
.animation {
animation-name: example;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes example {
from {transform: translateX(-100px);}
to {transform: translateX(0);}
}

首先，在定義動畫的CSS代碼中，使用了animation-fill-mode屬性，并將其值設置為forwards。該屬性可以用來指定在動畫完成后元素應該應用哪種樣式。這里將其設置為forwards，表示在動畫結(jié)束后，元素將保持在動畫的最后一幀狀態(tài)。

// 方法2：使用animation-play-state屬性
.animation {
animation-name: example;
animation-duration: 2s;
}
@keyframes example {
from {transform: translateX(-100px);}
to {transform: translateX(0);}
}
.animation:hover {
animation-play-state: paused;
}

第二種方法則是在CSS代碼中，使用了animation-play-state屬性。該屬性可以用來控制動畫的運行狀態(tài)，包括paused（暫停）和running（運行）。在這里，我們設置當鼠標懸停在元素上時，動畫的運行狀態(tài)將被暫停，從而達到停留在最后一幀的效果。