animation-fill-mode

語法:

animation-fill-mode<single-animation-fill-mode>[,<single-animation-fill-mode>]*

<single-animation-fill-mode> = none | forwards | backwards | both

預設值none

適用於:所有元素,包含偽物件:after和:before

繼承性:無

動畫性:否

計算值:指定值

媒體:視覺

取值:

none:
預設值。不設定物件動畫之外的狀態
forwards:
設定物件狀態為動畫結束時的狀態
backwards:
設定物件狀態為動畫開始時的狀態
both:
設定物件狀態為動畫結束或開始的狀態

說明:

檢索或設定物件動畫時間之外的狀態
  • 如果提供多個屬性值,以逗號進行分隔。
  • 對應的腳本特性為animationFillMode

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-9.0 2.0-4.0 4.0-42.0-webkit- 6.0-8.0-webkit- 15.0-29.0-webkit- 6.0-8.4-webkit- 2.1-3.0-webkit- #1 18.0-42.0-webkit-
10.0+ 5.0-15.0-moz- 43.0+ 9.0+ 30.0+ 9.0+ 4.0-40.0-webkit-
16.0+
  1. 在一些場景中會有錯誤行為
  2. 部分瀏覽器不支援偽元素動畫,或者支援得不夠好,盡可能不要利用偽元素來做動畫

示例: