animation-fill-modeプロパティはCSSアニメーション実行後、対象要素にどのようなスタイルを適用するか設定します。animation-fill-modeの初期値はnoneのため、何も指定しなければ元のスタイルが適用されます。例えば下記の場合、クラス名caption_txtの透明度はCSSアニメーション実行後、0に戻ってしまいます。
a .caption_txt {
opacity: 0;
}
a:hover .caption_txt {
animation: show 0.2s linear 0s;
}
@keyframes show{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
透明度を0に戻さず、CSSアニメーションの最後のキーフレームのスタイルを保持するにはanimation-fill-mode: forwards;を指定します。
a .caption_txt {
opacity: 0;
}
a:hover .caption_txt {
animation: show 0.2s linear 0s;
animation-fill-mode: forwards;
}
@keyframes show{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
またはクラス名caption_txtの元のスタイルで設定されているopacity: 0;を削除します。これならanimation-fill-mode: forwards;の指定がなくてもCSSアニメーションの最後のキーフレームのスタイルが保持されます。表示・非表示はopacityの代わりにdisplayで制御しています。
a .caption_txt {
display: none;
}
a:hover .caption_txt {
display: block;
animation: show 0.2s linear 0s;
}
@keyframes show{
from{
opacity: 0;
}
to{
opacity: 1;
}
}





