CSS3 動畫保持是指在 CSS3 動畫結(jié)束后,元素的狀態(tài)是否會保持在最后動畫的時刻,而不是立即回到最開始動畫之前的狀態(tài)。
在 CSS3 中,動畫保持有兩種方式:forwards 和 backwards,分別用來表示動畫結(jié)束時元素的狀態(tài)是否保持到最后一幀或者是回到第一幀。默認(rèn)情況下,動畫保持是關(guān)閉的,即元素會立即回到動畫之前的狀態(tài)。
/* for forwards */ animation-name: my-animation; animation-duration: 2s; animation-fill-mode: forwards; /* for backwards */ animation-name: my-animation; animation-duration: 2s; animation-fill-mode: backwards;
使用 animation-fill-mode 屬性可以設(shè)置動畫保持的方式。forwards 表示動畫執(zhí)行完之后,元素將保持在最后一幀的狀態(tài)。backwards 表示動畫執(zhí)行前,元素先回到第一幀的狀態(tài),然后再執(zhí)行動畫。
需要注意的是,如果使用 forwards 方式,則必須設(shè)置動畫的持續(xù)時間,否則動畫保持不會生效。