アニメーションのキーフレームを指定するには？ - @keyframesの解説

アニメーションのキーフレームを指定するには?

＠ルール書式

@keyframes 【アニメーション名】 {

　　【キーフレーム時点指定】 { 【キーフレーム状態指定】 }

　　[【キーフレーム時点指定】 { 【キーフレーム状態指定】 }...]

}

対応ブラウザ

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

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

値一覧

「【キーフレーム時点指定】 { 【キーフレーム状態指定】 } 」で、一つのキーフレームを表します。任意の数のキーフレームが指定可能で、順序が前後しても構いません。

起点のキーフレームと終点のキーフレームは必ず指定します。

値	内容
アニメーション名	定義するアニメーションの名前を設定します。 CSSの識別子として有効な名前である必要があります。 animationプロパティ、またはanimation-nameプロパティでの指定と合わせます。
キーフレーム時点指定	「キーフレーム状態指定」が適用されるタイミングを、キーワードfrom to または再生時間に対するパーセント値で指定します。キーワードfromは0%、キーワードtoは100%と同じです。
キーフレーム状態指定	「キーフレーム時点指定」のタイミングで、要素がどのような状態になるかを、任意の数のCSSを記述して指定します。

解説文

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

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

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

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

構文としては、定義するアニメーションの名前を宣言したうえで、複数のキーフレームを指定することで、アニメーションの内容を指定します。

ここでいうキーフレームというのは、各時点での要素の状態を記述したもので、再生時間に対するパーセント値による時間指定と、一つのブロックで囲まれた任意の数のプロパティの記述からなっています。

10% {
    color:red;
    backgournd-color:green;
}

アニメーションは基本的に、キーフレームからキーフレームへと、時間指定にしたがって、それぞれのタイミングで、指定の状態になるように変化させていくことで実現されます。この時、キーフレームとキーフレームの間の時点での要素の状態は、アニメーションの補間方法を指定するには？プロパティによって指定されるアルゴリズムで補間されます。

開始時点と終了時点のキーフレームは必ず記述しなければならず、また、同じ時点に対するキーフレームが重複して記述された場合は、後に記述されたほうが有効になります。

また、複数の@keyframesの記述で、アニメーション名が重複した場合も、後に記述されたものが有効になります。

以下の例では、背景色が透明な状態から徐々に色が濃くなって最終的に緑色になる、mygradationという名前のアニメーションを、0%時点、60%時点、100%時点の各タイミングでのキーフレームを指定することで定義しています。

@keyframes mygradation {
    0% {background-color:rgba(0,255,0,0);}
   60% {background-color:rgba(0,255,0,0.6);}
  100% {background-color:rgba(0,255,0,1);} 
}

ここで定義されたアニメーションの内容を、どの要素に適用し、どのように再生するのかは、アニメーションを指定するには？プロパティ、またはそのサブプロパティで指定します。

サンプルソース

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

   /* myanimationという名前のアニメーションの内容を定義します */

   /* 標準 */
   @keyframes myanimation{
       /* 開始時点のキーフレームを指定します */
       from{ transform:rotate(0deg); background-color:green;}
       /* 50%時点のキーフレームを指定します */
       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>

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

@keyframesの解説