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

animation-fill-modeを使ってCSSアニメーションの実行前後のスタイルを指定する方法をご紹介します。

Contents

animation-fill-modeは4つ指定可能
animation-fill-modeを使ってCSSアニメーションの実行前後のスタイルを指定するCSS記述
animation-fill-modeを使ってCSSアニメーションの実行前後のスタイルを指定するHTML記述
CSSアニメーションをリセットするJavaScriptの記述
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>