CSS3是指在CSS2的基礎(chǔ)上增加了動畫、變形等功能的升級版，讓W(xué)eb頁面的效果更加豐富，提升用戶體驗。其中，設(shè)置動畫結(jié)束時的效果就是CSS3的一項重要功能。如何實(shí)現(xiàn)動畫結(jié)束時的效果呢？

/*設(shè)置動畫*/
.animation{
animation-name: my-animation; /*動畫名稱*/
animation-duration: 2s; /*動畫持續(xù)時間*/
animation-fill-mode: forwards; /*動畫結(jié)束時的效果*/
}
/*定義動畫*/
@keyframes my-animation{
from{opacity:0;} /*起始狀態(tài)*/
to{opacity:1;} /*結(jié)束狀態(tài)*/
}

上述代碼實(shí)現(xiàn)了一個簡單的淡入動畫效果，并設(shè)置了動畫結(jié)束時的效果為保持最后一幀狀態(tài)。這里采用了animation-fill-mode屬性，其有以下幾個可選值：

• none：默認(rèn)值，表示動畫結(jié)束時不做任何處理。
• forwards：表示動畫結(jié)束時保持最后一幀的狀態(tài)。
• backwards：表示動畫開始前，先讓元素以動畫第一幀的狀態(tài)顯示。
• both：表示同時應(yīng)用forwards和backwards效果。

這里需要注意的是，如果同時使用了animation-fill-mode屬性和animation-play-state屬性，其優(yōu)先級是animation-play-state更高。

總之，設(shè)置動畫結(jié)束時的效果可以讓你的頁面更加生動、有趣！