2024-07-24この記事では、animation-fill-modeプロパティを使って、CSSアニメーションの開始前と終了後のスタイルを指定する方法をご紹介します。アニメーションのタイミングや動きだけでなく、開始前と終了後の見た目を自在にコントロールできるこのプロパティを使いこなすことで、より洗練されたウェブデザインを作り出すことができます。Contentsanimation-fill-modeは4つ指定可能none(デフォルト)backwardsforwardsbothanimation-fill-modeを使ったCSSの書き方animation-fill-modeを使ったHTMLの書き方アニメーションをリセットするためのJavaScriptanimation-fill-modeを使ってCSSアニメーションの実行前後のスタイルを指定するデモページまとめディスプレイ広告animation-fill-modeは4つ指定可能none(デフォルト)animation-fill-modeのデフォルト値であり、アニメーションの実行前後に特別なスタイルを適用しません。したがって、アニメーションが適用されていない通常の状態で表示されます。backwardsアニメーション開始待ち時間「animation-delay」、「@keyframes」の開始「0%」の状態が適用される。アニメーション終了時「@keyframes」は適用されない。forwardsアニメーション開始待ち時間「animation-delay」、「@keyframes」は適用されない。アニメーション終了時、「@keyframes」の終了「100%」の状態が適用される。繰り返しアニメーションの場合はアニメーション終了時の状態が適用される。bothアニメーション開始待ち時間「animation-delay」、「@keyframes」の開始「0%」の状態が適用される。アニメーション終了時、「@keyframes」の終了「100%」の状態が適用される。繰り返しアニメーションの場合はアニメーション終了時の状態が適用される。「animation-fill-mode:none」「animation-fill-mode:backwards;」「animation-fill-mode:forwards;」「animation-fill-mode:both;」の4パターンと@keyframesのCSS記述です。次のHTMLコードは、animation-fill-modeを異なる値で設定した例です。アニメーションをリセットして再実行するためのボタンも含まれています。「animation-fill-mode無し」「animation-fill-mode:none」「animation-fill-mode:backwards;」「animation-fill-mode:forwards;」「animation-fill-mode:both;」の5パターンとCSSアニメーションをリセットするボタンを用意しました。<h1>animation-fill-modeを使ってCSSアニメーションの実行前後のスタイルを指定しました。<br>「リセット」ボタンをクリックするとCSSアニメーション再度実行され、CSSアニメーションの実行前後のスタイルが確認できます。</div>アニメーションをリセットするためのJavaScript以下のJavaScriptコードは、リセットボタンを押したときにアニメーションを再実行するためのものです。リセットボタンをクリックするとdoAnime()が実行され、CSSアニメーション実行エリア「id=”fillmodeArea”」内に再度HTMLを生成してます。--></script>animation-fill-modeを使ってCSSアニメーションの実行前後のスタイルを指定するデモページ実際の動きを確認したい方は、次のリンクからデモページにアクセスしてみてください。animation-fill-modeを使ってCSSアニメーションの実行前後のスタイルを指定するデモページまとめanimation-fill-modeを使うと、CSSアニメーションの開始前と終了後のスタイルを効果的にコントロールできます。これにより、アニメーションが終了しても視覚的な効果を持続させることができます。※流用される場合は自己責任でお願いします。デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。