transition-timing-function:トランジションが開始してから終了するまでの変化の遷移を指定する

初期値 ease
適用対象 全ての要素、::before::after擬似要素
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

transition-timing-functionプロパティの説明

transition-timing-functionは、トランジションが開始してから終了するまでの変化の遷移を指定します。これは、変化前の状態から変化後の状態へと移行する過程に、加速曲線を加えるものです。

トランジションの再生時間は、transition-durationで定義しますが、transition-timing-functionは時間経過の中で速度の変化を表します。

各プロパティごとに変化の推移を個別に指定することも可能です。その場合、transition-propertyでカンマ区切りのリスト形式の指定を行い、各プロパティに対してtransition-timing-functionの値を割り当てます。

これらの指定は、ショートハンド・プロパティのtransitionで一括操作が可能です。

transition-timing-functionに指定できる値

<easing-function>
トランジション効果の変化の推移を表すキーワードや関数による値です。
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(p1, p2, p3, p4)
任意の加速曲線を定義する関数です。p1p3の値は、0から1の範囲で指定しなければなりません。
steps(n, <jumpterm>)
いくつかの停止点を持つステップアニメーションを表す関数です。nの数によってトランジション全体の長さを均等に分割し、一時的に停止するコマを定義します。<jumpterm>で開始や終わりのコマに関する処理を指定します。
  • jump-none:トランジションをタイムラインの最初から再生します。
  • jump-start:トランジションの最初にジャンプが発生します。
  • jump-end:トランジションの最後にジャンプが発生します。
  • jump-both:トランジションの最初と最後の両方にジャンプが発生します。
  • start:トランジションの最初と最後の両方にジャンプが発生します。
  • start:jump-startと同じ効果です。
  • end:jump-endと同じ効果です。
  • step-start:関数表記のsteps(1, jump-start)と同じ効果です。
  • step-end:関数表記のsteps(1, jump-end)と同じ効果です。

transition-delayの使い方とサンプル

transition-delayプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

/* 関数値 */
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* ステップ関数 */
transition-timing-function: steps(4, jump-none);
transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(4, jump-end);
transition-timing-function: steps(4, jump-both);
transition-timing-function: steps(4, start);
transition-timing-function: steps(4, end);

/* 複数のタイミング関数 */
transition-timing-function: ease-in, linear, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* グローバル値 */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: revert;
transition-timing-function: unset;

transition-timing-functionの実例

それでは実際にtransition-timing-functionプロパティの書き方を見ていきましょう。以下の例は、変化の値が共通のボックスにトランジション効果を与えて、個別のtransition-timing-functionを指定した場合の挙動です。

加速曲線の違いを確認するために、チェックボックスで同時に変化するようにしました。何度かチェックボックスのON/OFFを切り替えて、開始地点と終了地点に至るまでの速度の違いを確かめて下さい。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > section {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 1rem;
	background-color: #fff;
}
section > div {
	overflow: hidden;
	width: 100%;
	margin: 1rem 0 0;
	padding: .5rem 1rem;
	border: 1px solid #000;
	background-color: #09f;
	color: #fff;
	white-space: nowrap;
	transition-duration: 1s;
	transition-property: width, background-color;
}
input, label {
	cursor: pointer;
}
section > input:checked ~ div {
	width: 20%;
	background-color: #f90;
}
#ttf_1 {
	transition-timing-function: ease;
}
#ttf_2 {
	transition-timing-function: ease-in;
}
#ttf_3 {
	transition-timing-function: ease-out;
}
#ttf_4 {
	transition-timing-function: ease-in-out;
}
#ttf_5 {
	transition-timing-function: linear;
}
HTML
<div class="samp_box">
	<section>
		<input type="checkbox" id="switch">
		<label for="switch">Switch!</label>
		<div id="ttf_1">transition-timing-function: ease;</div>
		<div id="ttf_2">transition-timing-function: ease-in;</div>
		<div id="ttf_3">transition-timing-function: ease-out;</div>
		<div id="ttf_4">transition-timing-function: ease-in-out;</div>
		<div id="ttf_5">transition-timing-function: linear;</div>
	</section>
</div>

ステップアニメーション風のトランジション効果

transition-timing-functionsteps()関数を指定すると、ステップアニメーション風の効果が得られます。以下の例は、最初のサンプルを応用して時間経過の度合いをコマ送りにした時の挙動です。

トランジションが開始するタイミング、あるいは終了するタイミングでジャンプするコマをキーワードで指定できます。これにより、タイムラインのどの場所で停止するかを細かく調整することができます。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > section {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 1rem;
	background-color: #fff;
}
section > div {
	overflow: hidden;
	width: 100%;
	margin: 1rem 0 0;
	padding: .5rem 1rem;
	border: 1px solid #000;
	background-color: #09f;
	color: #fff;
	white-space: nowrap;
	transition-duration: 4s;
	transition-property: width, background-color;
}
input, label {
	cursor: pointer;
}
section > input:checked ~ div {
	width: 20%;
	background-color: #f90;
}
#ttf_1 {
	transition-timing-function: steps(4, jump-none);
}
#ttf_2 {
	transition-timing-function: steps(4, jump-start);
}
#ttf_3 {
	transition-timing-function: steps(4, jump-end);
}
#ttf_4 {
	transition-timing-function: steps(4, jump-both);
}
#ttf_5 {
	transition-timing-function: steps(8, jump-none);
}
HTML
<div class="samp_box">
	<section>
		<input type="checkbox" id="switch">
		<label for="switch">Switch!</label>
		<div id="ttf_1">transition-timing-function: steps(4, jump-none);</div>
		<div id="ttf_2">transition-timing-function: steps(4, jump-start);</div>
		<div id="ttf_3">transition-timing-function: steps(4, jump-end);</div>
		<div id="ttf_4">transition-timing-function: steps(4, jump-both);</div>
		<div id="ttf_5">transition-timing-function: steps(8, jump-none);</div>
	</section>
</div>

transition-timing-functionに関連するCSSプロパティ

トランジション
transition 時間によって変化するトランジション効果の値をまとめて操作する
transition-delay トランジションが開始する前の待ち時間を指定する
transition-duration トランジションが開始してから終了するまでの時間を指定する
transition-property トランジションの対象となるプロパティを指定する
transition-timing-function トランジションが開始してから終了するまでの変化の遷移を指定する