既定値ではanimation-fill-modeのステータスはnoneなので、animationが終了したあとは元のcssに戻ります。
animationが終了したときに@keyframesのcssを適用したいときにはanimation-fill-modeのステータスをforwardsにすることで実現できます。
ここではanimation-fill-modeについて解説していきます。
animation-fil-modeとは、animationが発火してから、
animation-deray中とanimation実行後にどこのcssを適用するかを設定するcssです
animation-fill-modeの指定には個別のcss設定のほか、animationのショートハンドとして設定も可能です。
animation-fill-mode: forwards;
animation: slide-animation 5s ease forwards;
/* どちらでもいいです */animation-fill-modeのステータス一覧は以下のとおりです。
| none（初期値） | アニメーション終了時元のスタイルを適用 |
| forwards | アニメーション終了時のスタイルを保持 |
| backwards | アニメーション開始時のスタイルを直ちに適用 |
| both | forwardsとbackwardsが両方適用 |
forwards・backwordsともに末尾のsを忘れずにつけましょうね！あまり使わないステータスなので、スペルミスで手詰まることは意外とあります。私だけかもしれませんが。
animationが終了したときの状態を設定する他にも、
animation-deray（animationが始まるまでの遅延時間を設定）がかかっている場合、その遅延時間中にどちらのcssを適用するかを設定できます。
一覧にするとこうなります。
| プロパティ | deray中 | 終了時 |
| none | 元のcss | 元のcss |
| forwards | 元のcss | @keyframesのcss |
| backwards | @keyframesのcss | 元のcss |
| both | @keyframesのcss | @keyframesのcss |
ここで使うコードは以下のとおりです。動きに関係のない部分は省略しています。
<div id="fill-mode_none" class="fill-mode_item">none</div>
<div id="fill-mode_forwards" class="fill-mode_item">forwards</div>
<div id="fill-mode_backwards" class="fill-mode_item">backwards</div>
<div id="fill-mode_both" class="fill-mode_item">both</div>
<style>
.fill-mode_item {
width: 150px;
height: 40px;
margin: 30px;
background: lightblue; /* もとの色はlightblueです */
border-radius: 20px;
color: #fff;
line-height: 40px;
text-align: center;
}
@keyframes fill-mode_lecture {
0% {
background: pink; /* animation中はpinkになります */
transform: translateX(0);
}
100% {
background: pink;
transform: translateX(100px);
}
}
#fill-mode_none {
animation: fill-mode_lecture 2s linear 3s none;
}
#fill-mode_forwards {
animation: fill-mode_lecture 2s linear 3s forwards;
}
#fill-mode_backwards {
animation: fill-mode_lecture 2s linear 3s backwards;
}
#fill-mode_both {
animation: fill-mode_lecture 2s linear 3s both;
}
</style>色が変化して右に移動します。
animation-derayを3秒に設定していますので、ボタンを押してからの色の変わり方と動き出しについて確認してみてください。
deray中とanimation終了後にどちらのCSSが適用されているかに注目しましょう。
animation終了後のcss設定のために使われることが多いですが、細かいanimationの調整にも使える設定もありますね。
ではまた。
