今までのアニメーションはこんな感じでした
カーソルを乗せてください
アニメーションが終わった後に開始位置に戻ってしまうのが嫌な場合もありますよね
そんな時に使うのがanimation-fill-modeプロパティです
animation-fill-modeをつかうと…
カーソルを乗せてください
そのままになっている！
そんなanimation-fill-modeプロパティの使い方や他にどう使うかを今回見ていきます
また記事の都合上こちらの記事から順番にみてもらうと初めて学ぶ方もわかりやすいかと思います
1.animation-fill-mode
最初の例では「アニメーション終わりをそのままの状態にするため」にと説明しましたが、もう少し付け加えるとanimation-fill-modeプロパティはアニメーション前、後の状態を指定できるプロパティです。
でも主にアニメーション後に状態を変えたくない場合に使用します。
セレクター{
animation-fill-mode: 値;
}アニメーション後に要素を固定したい場合は値を”forwards”としてやります。
.box{
animation-fill-mode: forwards; /*再生後はその位置に留まる*/
}ボタンをクリックしてください
/*keyframesの設定*/
@keyframes translate{
100%{
transform: translate(230px);
border-radius: 50%;
}
}
/*アニメーションの設定*/
.box{
animation-name: translate; /*keyframesの名前が"translate"*/
animation-duration: 2s; /*2秒間かけてアニメーションする*/
animation-fill-mode: forwards; /*再生後はその位置に留まる*/
}また他にも値がありますので以下にまとめました
ボタンにカーソルを乗せてください
<div class="boxA signal">none</div>
<div class="boxB signal">forwards</div>
<div class="boxC signal">backwards</div>
<div class="boxD signal">both</div>/*keyframesの設定*/
@keyframes signal{
0%{
background-color: #00B06B;
color: #fff;
}
60%{
background-color: #F2E700;
color: #000;
}
100%{
background-color: #bc302c;
color: #fff;
}
}
/*アニメーションの設定*/
.signal{
animation-name: signal; /*keyframesの名前が"signal"*/
animation-duration: 3s; /*3秒間かけてアニメーションする*/
animation-timing-function: linear; /*アニメーションが"linear"で動く*/
}
.boxA{
animation-fill-mode: none;
}
.boxB{
animation-fill-mode: forwards;
}
.boxC{
animation-fill-mode: backwards;
}
.boxD{
animation-fill-mode: both;
}見る限り値を”forwards”か”both”にするとアニメーションした際に最初の状態に戻ることなくそのままの状態でいてくれます。
じゃあ”forwards”と”both”の違いって何なの？
animation-delayプロパティを使った時に違いがでるんだ
次の例にはanimation-delayプロパティをそれぞれ付け加えたよ
開始の時に違いが出るから注意してやってみてね
ボタンにカーソルを乗せてください
/*keyframesの設定*/
@keyframes signal{
0%{
background-color: #00B06B;
color: #fff;
}
60%{
background-color: #F2E700;
color: #000;
}
100%{
background-color: #bc302c;
color: #fff;
}
}
/*アニメーションの設定*/
.signal2{
animation-name: signal; /*keyframesの名前が"signal2"*/
animation-duration: 3s; /*3秒間かけてアニメーションする*/
animation-timing-function: linear; /*アニメーションが"linear"で動く*/
animation-delay: 1s; /*1秒後にアニメーションを開始する*/
}
.boxA{
animation-fill-mode: none;
}
/*アニメーション開始前にkeyframesの初期値が適用されず、終了後にも適用されない(初期値)*/
.boxB{
animation-fill-mode: forwards;
}
/*アニメーション開始前にkeyframesの初期値が適用されず、アニメーション終了後はスタイルを保ったままにする*/
.boxC{
animation-fill-mode: backwards;
}
/*アニメーション開始前にkeyframesの初期値が適用されるが、終了後には適用されない*/
.boxD{
animation-fill-mode: both;
}
/*アニメーション開始前にkeyframesの初期値が適用され、アニメーション終了後はスタイルを保ったままにする*/“backwards”と”both”はボタンに乗った瞬間にスタイルが変わってる
keyframesの初期値が適用されるってそういうことなんだ
逆に終了時にもkeyframesが適用されているからアニメーション終了後もそのままの位置にあるってことなんだね
そういうこと！
文章だけだとわかりづらいので表にまとめました
| キーワード | 開始時(animation-delayが指定されている時) | 終了時 |
|---|---|---|
| none | keyframesの初期値が適用されない | keyframesが適用されない(初期値) |
| forwards | keyframesの初期値が適用されない | keyframesが適用される |
| backwards | keyframesの初期値が適用される | keyframesが適用されない |
| both | keyframesの初期値が適用される | keyframesが適用される |
2.まとめ
- アニメーション前、後の状態を指定できるプロパティ
- animation-delayプロパティを設定するかどうかで始まり方が変わる
セレクター{
animation-fill-mode: 値;
}| キーワード | 開始時(animation-delayが指定されている時) | 終了時 |
|---|---|---|
| none(初期値) | keyframesの初期値が適用されない | keyframesが適用されない |
| forwards | keyframesの初期値が適用されない | keyframesが適用される |
| backwards | keyframesの初期値が適用される | keyframesが適用されない |
| both | keyframesの初期値が適用される | keyframesが適用される |
コメント