animation-fill-mode

概要

animation-fill-mode CSS プロパティは、CSS アニメーションの適用先に対して、アニメーションの実行前や実行後にどのようなスタイルを適用するかを設定します。

• 初期値 none
• 適用範囲 すべての要素と ::before および ::after 疑似要素
• 継承 継承しない
• メディア visual
• 計算値 指定値
• アニメーションの可否 不可
• 正規順序 the unique non-ambiguous order defined by the formal grammar

構文

Formal syntax: [ none | forwards | backwards | both ]#

animation-fill-mode: none
animation-fill-mode: forwards
animation-fill-mode: backwards
animation-fill-mode: both

The # indicates that several values may be given, separated by commas.
Each applies to the animation defined in the same order in animation-name.
animation-fill-mode: none, backwards
animation-fill-mode: both, forwards, none

値

none

アニメーションで指定されたスタイルは、アニメーションの実行前や実行後には適用されません。

forwards

アニメーションの適用先は、アニメーションの最後に適用されたキーフレームの指定によって計算された値を維持します。これは通常、'100%' または 'to' キーフレームになります。ただし、animation-direction の値が 'alternate' で、かつ animation-iteration-count に偶数が設定されている場合は '0%' または 'from' キーフレームになります。

animation-direction	animation-iteration-count	last keyframe encountered
normal	even or odd	100% or to
reverse	even or odd	0% or from
alternate	even	0% or from
alternate	odd	100% or to
alternate-reverse	even	100% or to
alternate-reverse	odd	0% or from

backwards

アニメーションの適用先に、'0%' または 'from' キーフレームで定義された値を即座に適用して、animation-delay プロパティで指定した時間の間もその状態を維持します。

animation-direction	first relevant keyframe
normal or alternate	0% or from
reverse or alternate-reverse	100% or to

both

forwards と backwards の両方の規定に従います。よって、アニメーションの設定は実行前と実行後の両方に適用されます。

例示

h1 {
  animation-fill-mode: forwards;
}

仕様

ブラウザ実装状況

関連情報

• CSS アニメーション
• AnimationEvent
• アニメーション関連の CSS プロパティ及び @-規則: animation 、 animation-delay 、 animation-direction 、 animation-duration 、 animation-fill-mode 、 animation-iteration-count 、 animation-name 、 animation-play-state 、 animation-timing-function 、 @keyframes