プレミアム会員限定動画

Web Animations APIでアニメーション再生時の前後の状態を制御する「fill（フィル）」について解説！

この動画では、アニメーション再生時の前後の状態に関するオプションに焦点を当てて説明しています。
オプションとして、アニメーション再生前後の状態を調整するために「fill」オプションを紹介しています。初期値は「none」で、アニメーションの待機時間と終了後の状態を制御します。また、「backwards」は待機時間中に最初の状態で待機し、アニメーションが開始された後に再生されます。そして「forwards」はアニメーションが終了した後も最後の状態で停止します。
両方したい場合は、「both」を指定することで、実装できます。