スタイルanimationFillModeプロパティ
例
<div>要素のanimationFillModeプロパティを変更する:
document.getElementById("myDIV").style.animationFillMode = "forwards";
定義と使用法
AnimationFillModeプロパティは、アニメーションが再生されていないとき(アニメーションが終了したとき、または「遅延」があるとき)に要素に適用されるスタイルを指定します。
デフォルトでは、CSSアニメーションは、最初のキーフレームが「再生」されるまでアニメーション化する要素に影響を与えず、最後のキーフレームが完了すると影響を停止します。AnimationFillModeプロパティは、この動作をオーバーライドできます。
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
数字の後にMozが続くと、プレフィックスで機能した最初のバージョンが指定されます。
Property | |||||
---|---|---|---|---|---|
animationFillMode | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
構文
AnimationFillModeプロパティを返します。
object.style.animationFillMode
AnimationFillModeプロパティを設定します。
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
プロパティ値
Value | Description |
---|---|
none | Default value. The animation will not apply any styles to the target before or after it is executing |
forwards | After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended |
backwards | The animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay. These are either the values of the from keyframe (when animation-direction is "normal" or "alternate") or those of the to keyframe (when animationDirection is "reverse" or "alternate-reverse") |
both | The animation will follow the rules for both forwards and backwards. That is, it will extend the animation properties in both directions |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
技術的な詳細
デフォルト値: | なし |
---|---|
戻り値: | 要素のanimation-fill-modeプロパティを表す文字列 |
CSSバージョン | CSS3 |
関連ページ
CSSリファレンス:animation-fill-modeプロパティ