トランジションの補間方法を指定するには？ - transition-timing-functionの解説

トランジションの補間方法を指定するには?

要素書式

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

対応ブラウザ

IE 9：×
Firefox 10.0：○(-moz-transition-timing-function)
Opera 11.61：○(-o-transition-timing-function)
Chrome 17.0：○(-webkit-transition-timing-function)
Safari 5.1：○(-webkit-transition-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プロパティの値が、疑似クラス「:hover」や「:active」の適用などによって変更されるとき、既定では変更は瞬間的に反映されます。

トランジションは、こうした場合のプロパティの値の変化を、一定の時間をかけて徐々に行うようにする効果です。

transition-timing-functionプロパティでは、プロパティの値の時間的変化の仕方を指定します。

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

ease、linear、ease-in、ease-out、ease-in-outの各キーワードの指定は、cubic-bezier(x1, y1, x2, y2)の引数に特定の値を指定した場合と同じになります。

step-start、step-endの各キーワードの指定は、steps(ステップ数, ディレクション)の引数に特定の値を指定した場合と同じになります。

各キーワードを指定した場合のおよその変化の仕方は以下の通りです。

ease: 開始付近と終了付近の変化が滑らかになります。ease-inよりは速い変化で始まり、中間地点から減速していきます。既定値。

linear: 常に一定の割合で変化します。グラフは直線になります。

ease-in: 緩やかな変化で始まり、徐々に加速していきます。

ease-out: 速い変化で始まり、終点近くから緩やかになります。

ease-in-out: 緩やかな変化で始まり、徐々に加速していき、終点近くからまた緩やかになります。

step-start: 開始時点で終了状態の値に一気に変化し、以後変化しません。

step-end: 終了時点まで変化せず、終了時点で終了状態の値に一気に変化します。

トランジションの時間的変化を指定する値は、カンマで区切って複数指定することができます。その場合、transition-propertyプロパティの、対応する順番に指定されたプロパティが、それぞれの値の適用される対象となります。

例えば、transition-propertyプロパティで、カンマ区切りで２番目に指定したプロパティに適用されるトランジションの変化の仕方は、transition-timing-functionプロパティで、カンマ区切りで２番目に指定した値になります。

以下では、直線的に一定の割合で変化する（linear）、5 秒間の、緑から青への背景色のトランジションを指定しています。

#out{
    background-color:green;
}

#out:hover{
    background-color:blue;
    transition-property:background-color;
    transition-duration:5s;
    transition-timing-function:linear;
}

三次ベジェ曲線による時間的変化の指定

cubic-bezier(x1, y1, x2, y2)は、プロパティの値の時間的変化を、三次ベジェ曲線にもとづいて指定します。

三次ベジェ曲線は、起点P0、制御ポイントP1、制御ポイントP2、終点P3によって決まる、起点P0から始まり、終点P3で終わる曲線です。

この曲線は、起点P0付近がP0とP1を結ぶ線に接する勾配を持ち、終点P3付近がP2とP3を結ぶ線に接する勾配を持ち、その間の点は、一定の数学的方式で補間されます。

cubic-bezier(x1, y1, x2, y2)関数は、起点P0を(0,0)、P1を(x1,y1)、P2を(x2, y2)、終点P3を(1, 1)とする三次ベジェ曲線にしたがって、値を時間的に変化させます。（このとき、X軸は時間、Y軸は変化量で、各座標の値は、変化の全体の時間と、変化の全体の量をともに1とした縮尺です）

なお、サンプルソースの場合のように、引数に指定する値によっては、最終値をいったん過ぎてから、最終時点で最終値に戻ってくる、という挙動になることもあります。

ステップ関数による時間的変化の指定

steps(ステップ数, ディレクション)は、プロパティの値の時間的変化を、複数の段階に分けて行います。時間的変化は、同じ割合で進行する、不連続な、段階的変化になります。

このときのステップの発生の仕方は「ディレクション」パラメータによって変化します。「ディレクション」パラメータにはキーワードstartとendが指定可能です。

「ディレクション」に、startが指定された場合、最初のステップは、開始時点で起きます。つまり、「steps(3,start)」を指定した場合、次のようになります。（経過時間と値はどちらも全体に対する割合）

ステップ	1	2	3	-
経過時間	0	1/3	2/3	1
値	1/3	2/3	1	1

「ディレクション」に、endが指定された場合、最後のステップは、終了時点で起きます。つまり、「steps(3,end)」を指定した場合、次のようになります。（経過時間と値はどちらも全体に対する割合）

ステップ	-	1	2	3
経過時間	0	1/3	2/3	1
値	0	1/3	2/3	1

steps(ステップ数, ディレクション)はOperaでは未実装です。

サンプルソース

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

    #container{
       width:80%;
       border-right:1px solid black;
    }
    
    #container div{
        width:60px;
        height:60px;
        border:1px solid black;
        
        position:relative;
        left:0%;
    }
    
    /* トランジションの時間を共通指定する */
    #container:hover div{
        transition-duration:10s; /* 標準 */
        -moz-transition-duration:10s; /* Firefox */
        -o-transition-duration:10s; /* Opera */
        -webkit-transition-duration:10s; /* Chrome, Safari */
    }
    
    /* ボックスごとに時間的変化の補間方法（タイミング関数）を指定する */
    
    #container:hover div#box1{
        left:100%;
        transition-timing-function:ease;
        -moz-transition-timing-function:ease;
        -o-transition-timing-function:ease;
        -webkit-transition-timing-function:ease;
    }
    #container:hover div#box2{
        left:100%;
        transition-timing-function:linear;
        -moz-transition-timing-function:linear;
        -o-transition-timing-function:linear;
        -webkit-transition-timing-function:linear;
    }
    #container:hover div#box3{
        left:100%;
        transition-timing-function:ease-in;
        -moz-transition-timing-function:ease-in;
        -o-transition-timing-function:ease-in;
        -webkit-transition-timing-function:ease-in;
    }
    #container:hover div#box4{
        left:100%;
        transition-timing-function:ease-out;
        -moz-transition-timing-function:ease-out;
        -o-transition-timing-function:ease-out;
        -webkit-transition-timing-function:ease-out;
    }
    #container:hover div#box5{
        left:100%;
        transition-timing-function:ease-in-out;
        -moz-transition-timing-function:ease-in-out;
        -o-transition-timing-function:ease-in-out;
        -webkit-transition-timing-function:ease-in-out;
    }
    #container:hover div#box6{
        left:100%;
        transition-timing-function:cubic-bezier(0.7, 05, 0.2, 1.0);
        -moz-transition-timing-function:cubic-bezier(0.7, 05, 0.2, 1.0);
        -o-transition-timing-function:cubic-bezier(0.7, 05, 0.2, 1.0);
        -webkit-transition-timing-function:cubic-bezier(0.7, 05, 0.2, 1.0);
    }
    #container:hover div#box7{
        left:100%;
        transition-timing-function:steps(5,start);
        -moz-transition-timing-function:steps(5,start);
        -o-transition-timing-function:steps(5,start);
        -webkit-transition-timing-function:steps(5,start);
    }
</style>
</head>
<body>
   <p>右端への移動時間はすべて同じ10秒です。</p>
   <p>マウスオーバーで一斉にスタートします。</p>
   <div id="container">
       <div id="box1">ease</div>
       <div id="box2">linear</div>
       <div id="box3">ease-in</div>
       <div id="box4">ease-out</div>
       <div id="box5">ease-in-out</div>
       <div id="box6">cubic-bezier(0.7, 05, 0.2, 1.0)</div>
       <div id="box7">steps(5,start)</div>

   </div>
</body>
</html>

transition-timing-functionの解説