アニメーションの方向を指定するには？ - animation-directionの解説

アニメーションの方向を指定するには?

要素書式

animation-direction: 【再生方向】 [, 【再生方向】...];

対応ブラウザ

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

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

値一覧

値	内容
normal	つねに開始時点から終了時点へと順方向に再生します。既定値です。
alternate	奇数回の再生のときは順方向に、偶数回の再生のときは逆方向に再生します。 animation-timing-functionプロパティでの開始時点と終了時点の扱いも、逆再生時は逆になります。

解説文

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

animation-directionプロパティには、アニメーションが再生される方向を指定します。

キーワードnormalが指定された場合は、常に順方向（アニメーションを初期状態から最終状態へと変化させていく）で再生します。再生の次のサイクルが開始するときは、瞬時に初期状態に戻ります。これが既定値です。

キーワードalternateが指定された場合は、初回を含む奇数回の再生では順方向で再生を行いますが、偶数回の再生では、逆方向（アニメーションを最終状態から初期状態へと変化させていく）で再生します。

この場合、初期状態から最終状態、そこから逆回しで初期状態というサイクルを、アニメーションの繰り返しを指定するには？プロパティで指定された再生回数になるまで繰り返すことになります。

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

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

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

animation-name: animation1, animation2;
animation-direction: normal, alternate;

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

animation-name:myanimation; 
animation-duration:3s;
animation-direction:alternate;
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-direction:alternate;
       animation-iteration-count:10;
        
       -moz-animation-name:myanimation;
       -moz-animation-duration:5s;
       -moz-animation-direction:alternate;
       -moz-animation-iteration-count:10;
        
       -webkit-animation-name:myanimation;
       -webkit-animation-duration:5s;
       -webkit-animation-direction:alternate;
       -webkit-animation-iteration-count:10;
   }
</style>
</head>
<body>
    <p>10回順再生と逆再生を行う、背景の色を変化させつつ回転するアニメーションを表示します。</p>
    <img id="o" src="penguin.png">
</body>
</html>

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

animation-directionの解説