animation-fill-mode

by 3 contributors:

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

概要

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

構文

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 Animations Level 3 草案  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート (有)-webkit 5.0 (5.0)-moz
16.0 (16.0)
10 12-o
12.5 #
4.0-webkit
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? 5.0 (5.0)-moz
16.0 (16.0)
? ? ?

関連情報

ドキュメントのタグと貢献者

Contributors to this page: ethertank, yyss, FredB
最終更新者: ethertank,
サイドバーを隠す