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

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

要素書式

animation: 【アニメーション指定】 [, 【アニメーション指定】...];

対応ブラウザ

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

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

アニメーション指定項目一覧

それぞれのアニメーション指定は、スペースで区切られた、以下の項目で構成されています。すべて省略可能ですが、時間の値はこの順番で解釈されます。

カンマで区切って、複数のアニメーション指定のセットを指定することもできます。

【animation-name】【animation-duration】【animation-timing-function】【animation-delay】【animation-iteration-count】【animation-direction】

項目	内容
animation-name	適用したいアニメーションの、@keyframesで設定した名前を指定する、animation-nameプロパティの値を指定します。既定値はnone。
animation-duration	アニメーションの再生時間を指定する、animation-durationプロパティの値を指定します。既定値は0s。
animation-timing-function	アニメーションの再生速度の変化を指定する、animation-timing-functionプロパティの値を指定します。既定値はease。
animation-delay	アニメーションの開始までの時間を指定する、animation-delayプロパティの値を指定します。既定値は0s。
animation-iteration-count	アニメーションの再生回数を指定する、animation-iteration-countプロパティの値を指定します。既定値は1。
animation-direction	アニメーションの再生方向を指定する、animation-directionプロパティの値を指定します。既定値はnormal。

解説文

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

トランジションを指定するには？では、起点と終点の二つの状態しか指定することができませんが、アニメーションでは、よりきめ細かく中間の時点の状態を指定できます。

アニメーションの指定は、プロパティの値の時間的変化を指定する部分（再生内容）と、再生時間などの、要素に対する適用の仕方を指定する部分（再生方法）との、二つの部分からなっています。

アニメーションのキーフレームを指定するには？では、この二つのうち、アニメーションの内容となる、プロパティの値の時間的変化を指定します。

@keyframesで定義されたアニメーションの内容を、どの要素に適用し、どのように再生するのかは、animationプロパティ、またはそのサブプロパティの、アニメーションのキーフレーム名を指定するには？、アニメーションの再生時間を指定するには？、アニメーションの補間方法を指定するには？、アニメーションのディレイを指定するには？、アニメーションの繰り返しを指定するには？、アニメーションの方向を指定するには？で指定します。

animation-nameプロパティは、適用したいアニメーションの、@keyframesで設定した名前を指定します。既定値はnone（指定なし）です。

animation-durationプロパティは、アニメーションの再生時間を指定します。既定値は0s（０秒）です。

animation-timing-functionプロパティは、アニメーションの速度の変化の仕方を指定します。既定値はease（開始と終了付近では再生速度が滑らかになる）です。

animation-delayプロパティは、アニメーションが始まるまでの待ち時間を指定します。ここで指定した時間が経過した後で、アニメーションが開始されます。既定値は0s（０秒）です。

animation-iteration-countプロパティは、アニメーションの再生回数を指定します。既定値は1（１回）です。

animation-directionプロパティは、アニメーションの再生方向を指定します。逆再生や、順再生と逆再生の交互の繰り返しなどが指定できます。既定値はnormal（順方向の再生）です。

各指定の詳細は、それぞれの項目を参照してください。

animationプロパティでは、スペース区切りで、これらのプロパティの値を一括して指定します。（短縮プロパティ）

値はすべて省略可能で、順序が前後しても構いませんが、時間指定は、つねに最初の値がanimation-durationプロパティの、次の値がanimation-delayプロパティの値として解釈されます。

以下では、signalという名前を付けた、開始時点で背景色が青、50%の時点で背景色が黄色、終了時点で背景色が赤になるようなアニメーションを定義して、div要素に適用しています。

この場合、アニメーションの名称（animation-name）がsignal、再生時間（animation-duration）が 5 秒（5s）、再生回数（animation-iteration-count）が、無限反復（infinite）になります。

// アニメーションのキーフレーム定義
@keyframes signal {
   0% { background-color:blue;}
   50% { background-color:yellow; }
   100% { background-color:red; }
}

div#output{
    width:100px;
    height:100px;
    animation: signal 5s infinite;
}

複数のアニメーションを同じ要素に一括して指定する場合は、以下のように、それぞれのアニメーションの指定を、カンマで区切って並べます。

div#output{
    width:100px;
    height:100px;
    animation: animation1 5s infinite, animation2 10s 3;
}

サンプルソース

<!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:myanimation 5s linear 0s infinite alternate; 
       -moz-animation:myanimation 5s linear 0s infinite alternate; 
       -webkit-animation:myanimation 5s linear 0s infinite alternate; 
   }
</style>
</head>
<body>
    <p>背景の色を変化させつつ回転するアニメーションを表示します。</p>
    <img id="o" src="penguin.png">
</body>
</html>

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

animationの解説