transition-timing-function

『transition』の『アニメーションのタイミングや進行割合』を指定できます。

ブラウザのバージョンによっては、ベンダープレフィックス『webkit』、『moz』、『ms』等を付けないと動かない場合があるので、使用する際はベンダープレフィックスを付けるようにすることが一般的です。またPCのスペックによっては動きがカクついてしまう場合があります。

サンプルコード

style.css

/* ease: ゆっくり始まり、速くなり、ゆっくり終わる（初期値） */
.ease { transition: transform 0.5s; transition-timing-function: ease;}

/* linear: 一定速度 */
.linear { transition: transform 0.5s; transition-timing-function: linear;}

/* ease-in: ゆっくり始まる */
.ease-in { transition: transform 0.5s; transition-timing-function: ease-in;}

/* ease-out: ゆっくり終わる */
.ease-out { transition: transform 0.5s; transition-timing-function: ease-out;}

/* ease-in-out: ゆっくり始まりゆっくり終わる */
.ease-in-out { transition: transform 0.5s; transition-timing-function: ease-in-out;}

/* cubic-bezier: 独自のイージングカーブ */
.custom { transition: transform 0.5s; transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);}

/* steps: ステップ状にアニメーション（スプライトアニメーション等） */
.steps { transition: background-position 0.5s; transition-timing-function: steps(4, end);}

指定可能な値一覧

値	効果
ease	開始付近と終了付近の動きを滑らかにします。『transition-timing-function』の指定を省略した場合はこの『ease』が指定されているものとして扱われます。
linear	一定の速度で変化します。
ease-in	開始付近の動きを緩やかにします。
ease-out	終了付近の動きを緩やかにします。
ease-in-out	開始付近と終了付近の動きを緩やかにします。
step-start	すぐに最後の状態になります。（アニメーションなし）
step-end	最初の状態のまま変化しません。（アニメーションなし）

ブラウザでの表示結果

div {
	background: #f00;
	width: 200px;
	transition: 1s;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-ms-transition: 1s;

	transition-timing-function: ease;
	-webkit-transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	-ms-transition-timing-function: ease;
}
div:hover {
	width: 300px;
}

div {
	background: #f00;
	width: 200px;
	transition: 1s;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-ms-transition: 1s;

	transition-timing-function: linear;
	-webkit-transition-timing-function: linear;
	-moz-transition-timing-function: linear;
	-ms-transition-timing-function: linear;
}
div:hover {
	width: 300px;
}

div {
	background: #f00;
	width: 200px;
	transition: 1s;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-ms-transition: 1s;

	transition-timing-function: ease-in;
	-webkit-transition-timing-function: ease-in;
	-moz-transition-timing-function: ease-in;
	-ms-transition-timing-function: ease-in;
}
div:hover {
	width: 300px;
}

div {
	background: #f00;
	width: 200px;
	transition: 1s;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-ms-transition: 1s;

	transition-timing-function: ease-out;
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
}
div:hover {
	width: 300px;
}

div {
	background: #f00;
	width: 200px;
	transition: 1s;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-ms-transition: 1s;

	transition-timing-function: ease-in-out;
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-ms-transition-timing-function: ease-in-out;
}
div:hover {
	width: 300px;
}

div {
	background: #f00;
	width: 200px;
	transition: 1s;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-ms-transition: 1s;

	transition-timing-function: step-start;
	-webkit-transition-timing-function: step-start;
	-moz-transition-timing-function: step-start;
	-ms-transition-timing-function: step-start;
}
div:hover {
	width: 300px;
}

div {
	background: #f00;
	width: 200px;
	transition: 1s;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-ms-transition: 1s;

	transition-timing-function: step-end;
	-webkit-transition-timing-function: step-end;
	-moz-transition-timing-function: step-end;
	-ms-transition-timing-function: step-end;
}
div:hover {
	width: 300px;
}

概要

『transition』での『アニメーションのタイミングや進行割合』を指定できます。

『ease』、『linear』など用意された値の他にも『cubic-bezier()』を使用することで変化するタイミングを細かく指定することができます。イラストレーターなどのグラフィックソフトで曲線を描く際などに利用される3次ベジェ曲線をつかい変化の進行割合を指定します。
『cubic-bezier(P0 , P1 , P2 , P3)』
の『P0』、『P1』、『P2』、『P3』の値を変更してタイミングを変化します。指定できる数値は『0』から『1』になり、この範囲外の数値の場合は無効になります。

div {
	background: #f00;
	width: 200px;
	transition: 1s;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-ms-transition: 1s;

	transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-moz-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-ms-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
div:hover {
	width: 300px;
}

よくあるミス

cubic-bezierの値の範囲を間違える

『cubic-bezier()』はP1とP2の2点のX座標が0〜1の範囲である必要があります。Y座標は1を超えることができますが、X座標が範囲外の場合は無効な値として扱われます。

/* X座標(1番目・3番目の値)が0〜1の範囲外 */
.box { transition-timing-function: cubic-bezier(-0.5, 0, 1.5, 1); }

次のコードも別の記述例です。

/* X座標は0〜1の範囲内、Y座標は範囲外でも有効 */
.box { transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

複数プロパティに異なるtiming-functionを指定する場合の順序

複数のプロパティに異なるタイミング関数を指定する場合は、カンマで区切って順番通りに指定します。指定した数が少ない場合は繰り返して適用されます。

/* transformにはease、opacityにはlinearが適用される */
.box {
    transition-property: transform, opacity;
    transition-duration: 0.3s, 0.3s;
    transition-timing-function: ease, linear;
}