【CSS】トランジションのタイミング(transition-timing-function)の比較

      2016/08/15

transition-timing-functionで、アニメーションのタイミングを指定できます。
linear、ease、ease-in、ease-outなど幾つかありますが、どのような違いになるかは、実際に動作を目で確認してみるのが一番だと思います。

今回、その動作サンプルを作成しましたので、違いを比較してみてください。

transition-timing-functionの使い方

【使用例】マウスカーソルをホバーすると1秒かけて各Boxの幅が300pxになる。

(CSS)
			.wrap { background: beige; }
			.wrap:hover .box { width:300px; }
			.box {
				width: 100px;
				height: 50px;
				background: gold;
				border: 1px solid yellow;
				transition: 1s;
			}
			#box1 { transition-timing-function: linear; }
			#box2 { transition-timing-function: ease; }
			#box3 { transition-timing-function: ease-in; }
			#box4 { transition-timing-function: ease-out; }
			#box5 { transition-timing-function: ease-in-out; }
		
(HTML)
		<div class="wrap">
			<div id="box1" class="box">liner</div>
			<div id="box2" class="box">ease</div>
			<div id="box3" class="box">ease-in</div>
			<div id="box4" class="box">ease-out</div>
			<div id="box5" class="box">ease-in-out</div>
		</div>
		
(実行結果)

ホバーするとアニメーションします

liner
ease
ease-in
ease-out
ease-in-out

デフォルトのlinearは、一定の速度で変化しているのがわかります。
簡単で分かりやすいですが、面白みに欠けると思うこともありますので
好みや場合によって、使い分けると良いかと思います。

ちなみに、cubic-bezier関数を使うと、より詳細な設定が可能ですが、今回は省略します。
まずは上記のlinear~ease-in-outまでを使い分ければ十分ではないでしょうか。

transition-timing-function
説明
linear 一定の速度で変化(デフォルト)
ease 最初と最後がゆっくり変化する
ease-in 最初だけゆっくり変化する
ease-out 最後だけゆっくり変化する
ease-in-out 最初と最初がかなりゆっくり変化
cubic-bezier() cubic-bezier関数を使って詳細な指定をする

今回はtransition-timing-functionプロパティの違いについて、動作サンプルを用いて比較してみました。
タイミングが変わるだけでも、アニメーションの雰囲気がかなり変わってきますよね。
場面によって、使い分けていきたいですね。

 - css , , ,