アニメーションの補間方法を指定するには？ - animation-timing-functionの解説

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

要素書式

animation-timing-function: 【補間方法】 [, 【補間方法】...];

対応ブラウザ

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

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

値一覧

アニメーションの再生速度の変化の仕方（中間の値の補間方法）には以下の値が指定できます。（これらをタイミング関数とも呼びます）

値	内容
ease	開始付近と終了付近の変化を滑らかにします。cubic-bezier(0.25, 0.1, 0.25, 1.0)と同じ。省略時の既定値です。
linear	一定の割合で直線的に変化させます。cubic-bezier(0.0, 0.0, 1.0, 1.0)と同じ。
ease-in	開始付近の変化を緩やかにします。cubic-bezier(0.42, 0, 1.0, 1.0)と同じ。
ease-out	終了付近の変化を緩やかにします。cubic-bezier(0, 0, 0.58, 1.0)と同じ。
ease-in-out	開始付近と終了付近の変化を緩やかにします。cubic-bezier(0.42, 0, 0.58, 1.0)と同じ。
cubic-bezier(x1, y1, x2, y2)	変化に掛かる時間をX軸で1、変化の総量をY軸で1としたとき、起点の次の制御点を(x1,y1)、終点の前の制御点を(x2, y2)とする三次ベジェ曲線にしたがって値を変化させます。 x1、y1、x2、y2はすべて 0 から 1 の間の実数です。
step-start	開始時点で終了状態の値に変化します。steps(1, start)と同じ。Operaは未実装。
step-end	終了時点まで変化せず、終了時点で終了状態の値に変化します。steps(1, end)と同じ。Operaは未実装。
steps(ステップ数, ディレクション)	時間的変化を「ステップ数」の数のステップに等分に区切って不連続に変化させます。「ステップ数」は 1 以上の整数です「ディレクション」にキーワードstartが指定されたときは、起点で最初のステップが起きます。キーワードendが指定されたときは、終点で最後のステップが起きます Operaは未実装。

解説文

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

アニメーションの再生内容となる、プロパティの時系列での変化は、アニメーションのキーフレームを指定するには？で、キーフレームのリストの形で指定します。

キーフレームというのは、アニメーションの再生のある時点で、その要素の各プロパティが取るべき値を指定したものです。

@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);} 
}

アニメーションでは、それぞれのキーフレームの時点で、指定された状態になるように状態変化させます。キーフレームの間については、一定の数学的なアルゴリズムで補間することで連続的に、あるいは指定によっては不連続にアニメーションさせます。

animation-timing-functionプロパティには、この、キーフレーム間の状態の補間方法を指定します。この指定によって、アニメーションの、キーフレーム間での、再生の緩急を制御することができます。

トランジションの補間方法を指定するには？と異なり、この指定はあくまでキーフレーム間を単位とするもので、1回の再生全体についてのものではありません。そのため、それぞれの値の解説での、開始、終了、起点、終点等の用語も、キーフレームから次のキーフレームまでの間の遷移の開始、終了、起点、終点等を指します。

なお、animation-timing-functionプロパティが、@keyframes内の個別のキーフレームで指定された場合は、そのキーフレームから次のキーフレームへの変化についての指定になります。

値としては、ease、linear、ease-in、ease-out、ease-in-out、step-start、step-endのキーワードと、cubic-bezier(x1, y1, x2, y2)関数とsteps(ステップ数, ディレクション)関数が指定できます。

それぞれの値の意味については一覧とトランジションの補間方法を指定するには？を参照してください。

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

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

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

animation-name: animation1, animation2;
animation-timing-function: ease, linear;

以下の例では、myanimationという名前で@keyframesで定義されたアニメーションについて、全体を 3 秒間として、キーフレーム間の変化については一定の速度で（linear）、再生するように指定しています。

animation-name:myanimation; 
animation-duration:3s;
animation-timing-function:linear;

サンプルソース

<!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-timing-function:ease-in-out;
       -moz-animation-name:myanimation;
       -moz-animation-duration:5s;
       -moz-animation-timing-function:ease-in-out;
       -webkit-animation-name:myanimation;
       -webkit-animation-duration:5s;
       -webkit-animation-timing-function:ease-in-out;
   }
</style>
</head>
<body>
    <p>背景の色を変化させつつ回転するアニメーションを表示します。</p>
    <p>キーフレーム間の補間は「ease-in-out」（ゆっくり始まって加速し、また減速して終わる）です。</p>
    <img id="o" src="penguin.png">
</body>
</html>

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

animation-timing-functionの解説