CSS辞典 animation-fill-modeプロパティ、animation-interation-countプロパティ、animation-directionプロパティの解説

アニメーションの再生前後のスタイルを指定する「animation-fill-mode」プロパティ、アニメーションの繰り返し回数を指定する「animation-interation-countプロパティ」、アニメーションの再生方向を指定する「animation-directionプロパティ」の使用方法を記載

対応バージョン:CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

animation-fill-modeプロパティ

初期値none
適用される要素すべての要素(::before疑似要素、::after疑似要素を含む)
モジュールCSS Animations Module Level 3
継承なし

概要・使用方法(スタイル)

{ animation-fill-mode:スタイル ;}

「animation-fill-modeプロパティ」は、アニメーションの再生前後のスタイルを指定します。アニメーションが終了した時に最終的なスタイルを適用したりします。

指定できる値(高さ)

noneアニメーションの再生前後にスタイルを指定しません。
backwardsアニメーションの再生開始前とanimation-delayプロパティによって指定された遅延期限の間に、最初のアニメーション周期開始時のスタイルが適用されます。
対象となるキーフレームは、animation-directionプロパティの値がnormalあるいはalternateの場合fromまたは0%に、
reverseあるいはalternate-reverseの場合はtoまたは100%に変わります。
forwardsanimation-iteration-countプロパティの値が正の整数の場合、アニメーションの再生が終止した辞典のスタイルが適用されますが、0の場合、
最初のアニメーション周期開始時のスタイルが適用されます。
bothbackwardsとforwardsキーワードを両方同時に適用します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>animation-fill-mode:forwardsプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
    @keyframes animation1{
       0%   {width: 10px; background-color: red;}
       50%  {width: 200px;height: 10px; background-color: blue;}
       100% {width: 400px;height: 10px;  background-color: red;}
    }
    
    .fill-box1{position:relative;}
    .fill-box2{
       width: 400px; 
       height: 60pox;
    }
    
    .fill-box-bar{
       width: 10px;
       height: 10px;
       position:absolute;
       top:50px;
       opacity:0.3;
       animation-name: animation1;
       /* アニメーションの開始時間の遅延 */
       animation-duration: 10s;
       /* アニメーション変化のタイミング  */
       animation-timing-function:  ease-in-out;
       /* アニメーション終了時のスタイル */
       animation-fill-mode:forwards;
    }
    </style>
  </head>
  <body>
      <div class="fill-box1">
          <h1 class="fill-box2">夏の危険生物1</h1>
          <div class="fill-box-bar"></div>
      </div>
      <p>夏の危険な生物クラゲといわれる動物。</p>
  </body>
</html>

夏の危険生物1

夏の危険な生物クラゲといわれる動物。

animation-interation-countプロパティ

初期値1
適用される要素すべての要素(::before疑似要素、::after疑似要素を含む)
モジュールCSS Animations Module Level 3
継承なし

概要・使用方法

{ animation-interation-count: 再生回数;}

「animation-interation-countプロパティ」は、アニメーションの再生を繰り返す回数を指定します。このプロパティの初期値は1のため、指定しなければアニメーションは1回だけ再生されると停止しますが、数値を指定することで任意の回数再生を繰り返します。

infiniteを指定した場合は、アニメーションは無限に繰り返されます。

指定できる値(再生回数)

infiniteアニメーションを制限な繰り返します。
数値数値で指定します。指定した回数だけアニメーションを繰り返します。数値が整数でない場合、アニメーションは最後の再生周期の途中で終了します。
マイナスの値は指定不可です。0を指定した場合、値としては有効だがアニメーションは瞬時に終了します。

animation-directionプロパティ

初期値normal
適用される要素すべての要素(::before疑似要素、::after疑似要素を含む)
モジュールCSS Animations Module Level 3
継承なし

概要・使用方法

{ animation-direction: 再生方向;}

「animation-directionプロパティ」は、アニメーションの周期ごとの再生方向を指定します。なお、逆再生した場合は、「animation-timing-functionプロパティ」の値も逆の動きをとります。

たとえば、ease-inを指定した場合、ease-outの動きをします。

指定できる値

normalアニメーションは標準の方向で再生されます。
reverseアニメーションは逆方向で再生されます。
alternateアニメーションの繰り返し回数が奇数の場合は、標準の方向、偶数の場合は逆方向で再生されます。
alternate-reverseアニメーションの繰り返し回数が奇数の場合は、逆方向、偶数の場合は標準方向で再生されます。

サンプルコード

「animation-interation-countプロパティ」を指定いるため、5回アニメーション動作を繰り返します。「animation-directionプロパティ」で逆方向からアニメーションを行っています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>animation-iteration-countプロパティ、animation-direction: reverseプロパティCSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
    @keyframes animation1{
       0%   {width: 10px; background-color: red;}
       50%  {width: 200px;height: 10px; background-color: blue;}
       100% {width: 400px;height: 10px;  background-color: red;}
    }
    .iteration-box1{position:relative;}
    .iteration-box2{
       width: 400px; 
       height: 60pox;
    }   
    .iteration-box-bar{
       width: 10px;
       height: 10px;
       position:absolute;
       top:50px;
       opacity:0.3;
       animation-name: animation1;
       /* アニメーションの開始時間の遅延 */
       animation-duration: 10s;
       animation-timing-function:  ease-in-out;
       /* アニメーション実行回数 */
       animation-iteration-count:5;
       /* アニメーションのの再生方向 */
       animation-direction: reverse;
    }
    </style>
  </head>
  <body>
      <div class="iteration-box1">
          <h1 class="iteration-box2">夏の危険生物1</h1>
          <div class="iteration-box-bar"></div>
      </div>
      <p>夏の危険な生物クラゲといわれる動物。</p>
  </body>
</html>

実行結果

夏の危険生物1

夏の危険な生物クラゲといわれる動物。