備忘録的プログラミングリファレンス

animation-fill-modeプロパティ

 animation-fill-modeプロパティは、実行時間外の動作を指定するプロパティです。
 CSS animationは実行の前後ではエフェクトはかかりません。animation-fill-modeプロパティによってCSS animationの前後にエフェクトをかけることができます。
 実行時間外は実行前,実行後、または両方を指定することができます。

構文(Syntax)

CSS

animation-fill-mode:[ none | forwards | backwards | both | initial | inherit ];

DOM(JavaScript)

値の取得
object.style.animationFillMode
値の設定
object.style.animationFillMode="[ none | forwards | backwards | both | initial | inherit ]"

Values

Value摘要
none初期値(default値)。
backwards最初のキーフレーム状態を実行前から表示。
forwards最後のキーフレーム状態を実行後も保持。
both実行前と実行後にエフェクトがかかる
initial初期値に戻す。
inherit親エレメントのプロパティを継承。

備考(Remarks)

初期値(Default value)none
継承(Inherited)no
変化(Animatable)no

Example