プロパティ animation-fill-mode
プロパティ animation-fill-mode は、
アニメーション終了後にどの位置で停止するかを
設定します。デフォルトでは、アニメーションは
初期値に戻り、これはあまり美しく見えない場合が
あります。
構文
セレクタ {
animation-fill-mode: backwards | forwards | both | none;
}
値
| 値 | 説明 |
|---|---|
none |
アニメーションに遅延が設定されている場合、遅延時間中は
要素はその場所に留まり、その後 0% フレームに
ジャンプして移動します。
アニメーション終了後、要素は停止した状態に留まらず、
初期状態にジャンプして戻ります。
|
backwards |
animation-delay
が設定されていても、ページ読み込み後に要素を
0% フレームに向かって移動させ、
アニメーションが開始するまでそこに留まらせます。
アニメーション終了後、要素は停止した状態に
留まらず、初期状態にジャンプして戻ります。
|
forwards |
ブラウザに、アニメーション終了後も要素を 停止した状態のままに留めるよう指示します。 |
both |
backwards と forwards の両方を組み合わせたものです。
ページ読み込み後、要素は 0% フレームの状態になり、
アニメーション終了後は、要素は停止した場所に留まります。
|
デフォルト値: none。
例 . 値 none
この例では、要素の margin-left
は 300px に設定されていますが、
アニメーションの最初のフレームでは 0px です。
animation-delay
の遅延がないため、ページ読み込み後、要素は
300px ではなく 0px の状態になります。
さらに、アニメーション終了後は初期値に
ジャンプして戻ります：
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
margin-left: 300px;
animation-fill-mode: none;
animation-delay: 0s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
例 . 値 none
この例では、要素の margin-left
は 300px に設定されていますが、
アニメーションの最初のフレームでは 0px です。
また、要素には animation-delay
として 3 秒の遅延が設定されているため、
ページ読み込み後、要素は 0px ではなく
300px の状態になり、アニメーション開始後
3 秒間その場所に留まった後、
0px にジャンプして移動し、そこから
アニメーションが開始します。
さらに、アニメーション終了後は初期値に
ジャンプして戻ります：
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
margin-left: 300px;
animation-fill-mode: none;
animation-delay: 0s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
例 . 値 backwards
この例では、要素の margin-left
は 300px に設定されていますが、
アニメーションの最初のフレームでは 0px です。
また、要素の animation-fill-mode は
backwards に設定されているため、
ページ読み込み後、要素は animation-fill-mode
が none の場合のように 300px ではなく
0px の状態になります。
さらに、アニメーション終了後は初期値に
ジャンプして戻ります：
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
margin-left: 300px;
animation-fill-mode: backwards;
animation-delay: 0s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
例 . 値 none かつ反復回数が 1
この例では、要素の margin-left
は 300px に設定されていますが、
アニメーションの最初のフレームでは 0px です。
また、要素には animation-delay
として 3 秒の遅延が設定されているため、
ページ読み込み後、要素は 0px ではなく
300px の状態になり、アニメーション開始後
3 秒間その場所に留まった後、
0px にジャンプして移動し、そこから
アニメーションが開始します。
animation-fill-mode が none に
設定されているため、アニメーション再生後、
要素は初期値に戻ります：
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
margin-left: 300px;
animation-fill-mode: none;
animation-delay: 3s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: 1;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
例 . 値 forwards かつ反復回数が 1
この例では、animation-fill-mode は
forwards に設定されており、
アニメーションの反復回数
は 1 です。アニメーション再生後、
要素はアニメーションが終了した位置に留まり、
開始地点にジャンプして戻ることはありません。
さらに、要素の margin-left は
300px に設定されていますが、
アニメーションの最初のフレームでは 0px です。
また、要素には animation-delay
として 3 秒の遅延が設定されているため、
ページ読み込み後、要素は 0px ではなく
300px の状態になり、アニメーション開始後
3 秒間その場所に留まった後、
0px にジャンプして移動し、そこから
アニメーションが開始します：
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
margin-left: 300px;
animation-fill-mode: forwards;
animation-delay: 3s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: 1;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
例 . 値 both かつ反復回数が 1
この例では、animation-fill-mode は
both に設定されており、
アニメーションの反復回数
は 1 です。ページ読み込み後、
要素はアニメーションの最初のフレームの状態
（300px ではなく 0px）になり、
アニメーション再生後は、要素はアニメーションが
終了した位置に留まり、開始地点にジャンプして
戻ることはありません：
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
margin-left: 300px;
animation-fill-mode: both;
animation-delay: 3s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: 1;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
関連項目
-
アニメーション名を設定するプロパティ
animation-name -
アニメーションの持続時間を設定するプロパティ
animation-duration -
アニメーション実行前の遅延を設定するプロパティ
animation-delay -
アニメーションの実行速度を設定するプロパティ
animation-timing-function -
アニメーションの反復回数を設定するプロパティ
animation-iteration-count -
アニメーションの方向を設定するプロパティ
animation-direction -
アニメーションを一時停止できるようにするプロパティ
animation-play-state -
アニメーションの一括指定プロパティ
animation -
アニメーションのキーフレームを定義する命令
@keyframes -
要素へのホバー時にアニメーションを発生させるスムーズなトランジション
transition
