animation-timing-function：アニメーションの再生タイミングに変化を付ける

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

animation-timing-functionは、CSSのアニメーションが一回再生される周期の中で、どのように進行するかを指定します。この値は、@keyframesで与えられるタイムラインの進行割合に応じて変化する速度を操作します。

アニメーション関連のプロパティを一括で制御する場合は、animationを使用して下さい。

animation-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(x1, y1, x2, y2)

任意の三次ベジェ曲線を指定します。各数値は、時間xと速度yを表す座標上のハンドルの位置を表します。このハンドルで歪められた曲線の通りにアニメーションが進行します。それぞれ0から1の間の数値で指定します。

steps(n, <jumpterm>)

アニメーションに段階関数を与えてコマ送りにします。これによりストップモーションやスプライトの機能を実現します。例えば、長さ100%の画像に対して、10%刻みで停止点を与えて、10コマのスプライド画像を生成できます。

• jump-start：アニメーション開始時に最初のジャンプを発生させます。そのためアニメーション開始時点の状態は表示されません。
• jump-end：アニメーション開始時に最後のジャンプを発生させます。そのためアニメーション終了時点の状態は表示されません。
• jump-none：ジャンプを発生させません。アニメーションの0%と100%の時点にも同じ間隔の時間が確保されます。
• jump-both：アニメーションの開始時と終了時の両方にジャンプを発生させます。
• start：jump-startと同じ効果です。
• end：jump-endと同じ効果です。
• step-start：アニメーションの開始時点で止まります。steps(1, jump-start)と同じ効果です。
• step-end：アニメーションの完了時点で止まります。steps(1, jump-end)と同じ効果です。

animation-timing-functionの使い方とサンプル

animation-timing-functionプロパティの構文は以下の通りです。

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

/* 関数値 */
animation-timing-function: cubic-bezier(0, 0, 1.0, 1.0);

/* 段階関数の指定 */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(8, jump-end);
animation-timing-function: steps(10, jump-none);

/* 複数の値を指定 */
animation-timing-function: ease, step-both, cubic-bezier(0.25, 0.1, 0.25, 1.0);

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

animation-timing-functionの実例

それでは簡単な例を見てみましょう。同じ内容のアニメーションに対して、進行するタイミングだけを変化させると以下のような挙動となります。

.as_extend > div {
	margin-top: 10px;
	background: #ccc;
	animation-name: as_extend;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}
@keyframes as_extend {
	from { width: 20%; background: #5b96fc;}
	to { width: 100%; background: #fc605b;}
}
#atf_1 {
	animation-timing-function: ease;
}
#atf_2 {
	animation-timing-function: ease-in;
}
#atf_3 {
	animation-timing-function: ease-out;
}
#atf_4 {
	animation-timing-function: ease-in-out;
}
#atf_5 {
	animation-timing-function: linear;
}
#atf_6 {
	animation-timing-function: step-start;
}
#atf_7 {
	animation-timing-function: step-end;
}

<div class="as_extend">
	<div id="atf_1">ease</div>
	<div id="atf_2">ease-in</div>
	<div id="atf_3">ease-out</div>
	<div id="atf_4">ease-in-out</div>
	<div id="atf_5">liner</div>
	<div id="atf_6">step-start</div>
	<div id="atf_7">step-end</div>
</div>