transitionの変化のタイミングを見て確かめます

transition-timing-functionの値を変えることにより、アニメーションの変化のタイミングを変えることができますが、実際に見てみたいので見れるようにしました。

サンプルコード

html

	<div id="ease">ease</div>
	<div id="linear">linear</div>
	<div id="ease-in">ease-in</div>
	<div id="ease-out">ease-out</div>
	<div id="ease-in-out">ease-in-out</div>
	<div id="step-start">step-start</div>
	<div id="step-end">step-end</div>
	<div id="steps-5-start">steps(5,start)</div>
	<div id="steps-5-end">steps(5,end)</div>

css

ease {
	width:			14%;
	height:			30px;
	padding:		8px 0 0 4px;
	margin-bottom:		10px;
	background-color:	#1f0;
	-webkit-transition:	all 2s ease;
	transition:		all 2s ease;
}
ease:hover {
	width:			100%;
}

実際の動作では、transitionの「ease」の部分を色々変えています。緑色のボックスの横幅を14%から100%に変えるアニメーションです。

実際の動作

それぞれ緑色のボックスにマウスを重ねると動きます。

ease

easeはデフォルト値で、最初と最後が滑らかです。

linear

最初から最後まで一定です。

ease-in

最初がゆっくりです。

ease-out

最後がゆっくりです。

ease-in-out

最初と最後がゆっくりです。

step-start

終了地点に一気にジャンプします。

step-end

開始地点に居続け、最後に終了地点にジャンプします。

steps(5,start)

５ステップ変化しますが、開始地点で最初のステップが発生します。

steps(5,end)

５ステップ変化しますが、終了地点で最後のステップが発生します。

おまけ

最後に同時に動かします。マウスをボックスに乗せてください。

同時だと違いがよくわかりますね。

cubic-bezier()を使用すればオリジナルのタイミングを作ることができますが、これについては、また別の機会に書きたいと思います。