animation-fill-modeでアニメーションの再生中・再生後のスタイルを指定【CSS】

animation-fill-modeプロパティは、アニメーションの再生中や再生した後のスタイルを指定するプロパティです。

animation-fill-modeの値の指定方法

animation-fill-modeプロパティでは、以下のような値を指定できます。

none

noneを指定すると、スタイルは適用されません。

animation-delayプロパティでアニメーションの開始時間を指定している場合、再生開始までの時間は元のスタイルが適用されます。

backwards

backwardsを指定すると、animation-delayプロパティでアニメーションの開始時間を指定している場合、再生開始までの時間は最初のキーフレームのスタイルが適用され、アニメーションが再生した後も、最初のキーフレームのスタイルが適用されます。

forwards

forwardsを指定すると、animation-delayプロパティでアニメーションの開始時間を指定している場合、再生開始までの時間は元のスタイルが適用され、アニメーションが再生した後は、最後のキーフレームのスタイルが適用されます。

both

bothを指定すると、animation-delayプロパティでアニメーションの開始時間を指定している場合、再生開始までの時間は最初のキーフレームのスタイルが適用され、アニメーションが再生した後は、最後のキーフレームのスタイルが適用されます。