animation-fill-modeを使ってCSSアニメーションの実行前後のスタイルを指定する方法｜DAD UNION

この記事では、animation-fill-modeプロパティを使って、CSSアニメーションの開始前と終了後のスタイルを指定する方法をご紹介します。
アニメーションのタイミングや動きだけでなく、開始前と終了後の見た目を自在にコントロールできるこのプロパティを使いこなすことで、より洗練されたウェブデザインを作り出すことができます。

Contents

animation-fill-modeは4つ指定可能
animation-fill-modeを使ったCSSの書き方
animation-fill-modeを使ったHTMLの書き方
アニメーションをリセットするためのJavaScript
animation-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を使った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を使ったHTMLの書き方

次の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アニメーションの実行前後のスタイルが確認できます。</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>

アニメーションをリセットするためのJavaScript

以下の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>