animation-fill-modeを使ってCSSアニメーションの実行前後のスタイルを指定する方法をご紹介します。
animation-fill-modeは4つ指定可能
none(デフォルト)
アニメーション実行前後のスタイルは指定されない。デフォルトのスタイルが適用される。
backwards
アニメーション開始待ち時間「animation-delay」、「@keyframes」の開始「0%」の状態が適用される。
アニメーション終了時「@keyframes」は適用されない。
forwards
アニメーション開始待ち時間「animation-delay」、「@keyframes」は適用されない。
アニメーション終了時、「@keyframes」の終了「100%」の状態が適用される。繰り返しアニメーションの場合はアニメーション終了時の状態が適用される。
both
アニメーション開始待ち時間「animation-delay」、「@keyframes」の開始「0%」の状態が適用される。
アニメーション終了時、「@keyframes」の終了「100%」の状態が適用される。繰り返しアニメーションの場合はアニメーション終了時の状態が適用される。
animation-fill-modeを使ってCSSアニメーションの実行前後のスタイルを指定するCSS記述
※「animation-fill-mode:none」「animation-fill-mode:backwards;」「animation-fill-mode:forwards;」「animation-fill-mode:both;」の4パターンと@keyframesのCSS記述です。
<style> *{ padding: 0; margin: 0; } body{ font-size: 18px; text-align: center; } h1{ text-align: center; font-size: 20px; padding: 20px 0 40px 0; line-height: 1.8em; } input{ padding: 15px; } .box{ animation-name: animasample; animation-duration: 3s; animation-iteration-count: 1; animation-delay: 2s; animation-timing-function: ease-in; height: 60px; line-height: 60px; margin: 10px 0; color: #ffffff; background: #333333; display: block; } .modeNone{ animation-fill-mode:none; } .modeBackwards{ animation-fill-mode:backwards; } .modeForwards{ animation-fill-mode:forwards; } .modeBoth{ animation-fill-mode:both; } @keyframes animasample { 0%{ width: 30%; background: #D9D900; } 50%{ width: 50%; background: #4DFFA6; } 100%{ width: 100%; background: #0080FF; } } </style>
animation-fill-modeを使ってCSSアニメーションの実行前後のスタイルを指定するHTML記述
※「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アニメーションの実行前後のスタイルが確認できます。</h1> <input type="button" value="リセット" onclick="doAnime()"> <br> <br> <div id="fillmodeArea"> <div class="box">animation-fill-mode無し</div> <div class="box modeNone">animation-fill-mode:none;</div> <div class="box modeBackwards">animation-fill-mode:backwards;</div> <div class="box modeForwards">animation-fill-mode:forwards;</div> <div class="box modeBoth">animation-fill-mode:both;</div> </div>
CSSアニメーションをリセットするJavaScriptの記述
※リセットボタンをクリックするとdoAnime()が実行され、CSSアニメーション実行エリア「id=”fillmodeArea”」内に再度HTMLを生成してます。
<script type="text/javascript"> <!-- function doAnime(){ document.getElementById('fillmodeArea').innerHTML = '<div class="box">animation-fill-mode無し</div>'+ '<div class="box modeNone">animation-fill-mode:none;</div>'+ '<div class="box modeBackwards">animation-fill-mode:backwards;</div>'+ '<div class="box modeForwards">animation-fill-mode:forwards;</div>'+ '<div class="box modeBoth">animation-fill-mode:both;</div>'; } // --> </script>
animation-fill-modeを使ってCSSアニメーションの実行前後のスタイルを指定するデモページ
animation-fill-modeを使ってCSSアニメーションの実行前後のスタイルを指定するデモページ
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。