[CSS]animation-fill-modeについて

CSSのkeyframeで使われるanimation-fill-modeプロパティについて説明します。

CSSのanimation-fill-modeとは？

アニメーションの開始時と終了時の挙動を指定することができるプロパティです。

.class { 
    animation-fill-mode: none; 
    animation-fill-mode: backwards; 
    animation-fill-mode: forwards; 
    animation-fill-mode: both; 
}

この4つの値で構成されます。

それぞれの値について説明していきます。

animation-fill-mode: none;

noneは初期値になります。アニメーションが再生されると、元のスタイルが適用されます。

animation-fill-mode: backwards;

アニメーション再生後に、@keyframeで設定した0%の部分が適用されます。

animation-fill-mode: forwards;

アニメーション再生後に、@keyframeで設定した100%の部分が適用されます。

animation-fill-mode: both;

アニメーション再生後に@keyframedで設定した100%の部分が適用されます。

一方でanimation-delayプロパティを設定している場合は、0%の部分が適用されます。