アニメーションの繰り返しを指定するには？ - animation-iteration-countの解説

アニメーションの繰り返しを指定するには?

要素書式

animation-iteration-count: 【再生回数】 [, 【再生回数】...];

対応ブラウザ

IE 9：×
Firefox 10.0：○(-moz-animation-iteration-count)
Opera 11.61：×
Chrome 17.0：○(-webkit-animation-iteration-count)
Safari 5.1：○(-webkit-animation-iteration-count)

※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
※ブラウザはWindows 7上で動作確認を行っています。
※ユーザーの設定より、異なる挙動をする場合があります。

値一覧

値	内容
再生回数	アニメーションを再生する回数を指定します。実数値とキーワードinfiniteが指定できます。 infiniteが指定されると、無限回の繰り返しになります。負の値は0とみなされます。小数値の端数部分では、その割合だけ部分的に再生されます。例えば、1.3では1回と1/3実行されます。

解説文

CSSのアニメーションでは、プロパティの値を時間的に変化させることで、要素をアニメーションさせます。

animation-iteration-countプロパティには、アニメーションの再生回数を指定します。

指定できる値は任意の実数値かキーワードinfiniteです。キーワードinfiniteは、繰り返しが無制限に続くことを意味します。既定値は「1」（一度だけ再生する）です。

負の値は0として解釈され、アニメーションは一度も再生されません。

小数部分は、全体の再生時間に対する割合として解釈され、途中までの再生となります。例えば、1.5が指定された場合は、1回の再生の後に、再生時間の半分までが再生されます。

アニメーションの再生回数は、カンマで区切って複数指定することができます。その場合、アニメーションのキーフレーム名を指定するには？プロパティで対応する順番に指定されたアニメーションが、それぞれの値の適用される対象となります。

例えば、animation-nameプロパティで、カンマ区切りで２番目に指定したアニメーションの再生回数は、animation-iteration-countプロパティで、カンマ区切りで２番目に指定した値になります。

以下のように指定した場合、animation1が5に対応し、animation2が10に対応します。

animation-name: animation1, animation2;
animation-iteration-count: 5, 10;

以下の例では、myanimationという名前で@keyframesで定義されたアニメーションについて、1 回の再生を 3 秒間として、10 回再生を繰り返すように指定しています。

animation-name:myanimation; 
animation-duration:3s;
animation-iteration-count:10;

サンプルソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

    /* myanimationという名前のアニメーションの内容を定義します */
 
    /* 標準 */
    @keyframes myanimation{
        from{ transform:rotate(0deg); background-color:green;}
        50%{ transform:rotate(180deg); background-color:yellow;}
        to{ transform:rotate(360deg); background-color:red;}
    }
    
    /* Firefox */
    @-moz-keyframes myanimation{
        from{ -moz-transform:rotate(0deg); background-color:green;}
        50%{ -moz-transform:rotate(180deg); background-color:yellow;}
        to{ -moz-transform:rotate(360deg); background-color:red;}
    }
    
    /* Chrome, Safari */
    @-webkit-keyframes myanimation{
        from{ -webkit-transform:rotate(0deg); background-color:green;}
        50%{ -webkit-transform:rotate(180deg); background-color:yellow;}
        to{ -webkit-transform:rotate(360deg); background-color:red;}
    }
      
    img#o{
        position:absolute;
        top:100px;
        left:100px;
 
       /* myanimationという名前のアニメーションの再生方法を指定します */
        
       animation-name:myanimation;
       animation-duration:5s;
       animation-iteration-count:10;
        
       -moz-animation-name:myanimation;
       -moz-animation-duration:5s;
       -moz-animation-iteration-count:10;
        
       -webkit-animation-name:myanimation;
       -webkit-animation-duration:5s;
       -webkit-animation-iteration-count:10;
   }
</style>
</head>
<body>
     <p>背景の色を変化させつつ回転するアニメーションを10回再生します。</p>
     <img id="o" src="penguin.png">
</body>
</html>

下記画像を、サンプルソースで指定しているフォルダに保存して下さい。初期状態では、サンプルソースと同じ階層のフォルダが指定されています。

animation-iteration-countの解説