CSS3 動畫保持是指在 CSS3 動畫結束后,元素的狀態是否會保持在最后動畫的時刻,而不是立即回到最開始動畫之前的狀態。
在 CSS3 中,動畫保持有兩種方式:forwards 和 backwards,分別用來表示動畫結束時元素的狀態是否保持到最后一幀或者是回到第一幀。默認情況下,動畫保持是關閉的,即元素會立即回到動畫之前的狀態。
/* 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 屬性可以設置動畫保持的方式。forwards 表示動畫執行完之后,元素將保持在最后一幀的狀態。backwards 表示動畫執行前,元素先回到第一幀的狀態,然后再執行動畫。
需要注意的是,如果使用 forwards 方式,則必須設置動畫的持續時間,否則動畫保持不會生效。
上一篇css3 動畫 數字增加
下一篇css3 動畫幀數計算器