【CSS】transition-timing-functionプロパティの使用方法を徹底解説!!

こんにちは。

CSS3でトランジションを実装していると、「変化速度を一定にしたいなぁ」「段々早く変化させていくトランジションって実装できないかなぁ」と思ったことはありませんか?

実はトランジションの変化速度を自在に変更するための最適なCSSプロパティがあるんです!!

それがtransition-timing-functionプロパティです!!

ではどうやってtransition-timing-functionプロパティを使うんでしょうか??

そこで今回は、コーディング入門者向けにtransition-timing-functionプロパティの

・基本的な使い方
・各値の挙動

を徹底解説します!

transition-timing-functionとは

transition-timing-functionの読み方

transition-timing-functionは「トランジション タイミング ファンクション」と読みます。

timingは「時間調整」、functionは「機能」という意味がありますが、

transition-timing-functionはトランジションの時間を調整する機能を設定するプロパティになります。

transition-timing-functionは変化速度のパターンを変更するプロパティ

transition-timing-functionプロパティの用途を具体的にいうと、

変化速度のパターンを変更するプロパティ

です。

トランジションでCSSを変化させる場合、一定の速度で変化させるとデザインやUIによっては一定の速度では物足りない、場合によっては若干不自然な印象を与えてしまうシチュエーションがあります。

transition-timing-functionプロパティはそんなトランジションの速度に変化を与えて、徐々にスピードをあげたり逆に減速させることもできます。

transition-timing-functionで利用できる値

transition-timing-functionプロパティでは以下の値を使うことができます。

説明
 ease  加速をつけて、ゆっくりと始まり、ゆっくりと終わります。(初期値)
 ease-in  ゆっくりと始まり、一定速度で終わります。
 ease-out  一定速度で始まり、ゆっくりと終わります。
 ease-in-out  ゆっくりと始まり、ゆっくりと終わります。
 linear  最初から最後まで一定の速度で変化します。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 完全対応
Internet Explorer 完全対応
Opera 完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応

transition-timing-functionの基本的な使い方

ここでは実際に、transition-timing-functionプロパティの各値の挙動をサンプルコードと一緒にみていきます。

コピペして使用することもできますので、自分のテキストエディタにコピペして実際にブラウザで見てみると実感が出るかもですね!!

今回は赤い四角の上にマウスカーソルを乗せると横幅が変化するトランジションのサンプルコードを使用します。

ease

easeを指定すると、始めは加速をつけてゆっくりと始まり、ゆっくりと終わるといったトランジションを実装することができます。

transition-timing-functionプロパティの初期値がeaseでもあるので、transition-timing-functionプロパティを指定しなくても同じ挙動になります。

See the Pen
transition-timing-function–ease
by ryuga (@ryuga)
on CodePen.

ease-in

ease-inを指定すると、ゆっくりと始まって一定速度で終わるといったトランジションを実装することができます。

見ている人からすると途中で打ち切られたようなトランジションになりますね。

See the Pen
transition-timing-function–ease-in
by ryuga (@ryuga)
on CodePen.

ease-out

ease-outを指定すると、一定速度で始まってゆっくりと終わるといったトランジションを実装することができます。

See the Pen
transition-timing-function–ease-out
by ryuga (@ryuga)
on CodePen.

ease-in-out

ease-in-outを指定すると、ゆっくりと始まってゆっくりと終わるようなトランジションを実装することができます。

easeと比べると、始めの加速があるかないかの違いがあります。

See the Pen
transition-timing-function–ease-in-out
by ryuga (@ryuga)
on CodePen.

linear

linearを指定すると、等速でトランジションさせることができます。

See the Pen
transition-timing-function–linear
by ryuga (@ryuga)
on CodePen.

まとめ

いかがでしょうか?

今回はtransition-timing-functionプロパティの基本的な使い方、各値の挙動についてをサンプルコードと一緒に解説していきました。

transition-timing-functionプロパティを設定することによって、通常よりも1段階上のトランジションを実装することができます。

この機会にぜひtransition-timing-functionプロパティの使い方を覚えて1段階上のコーディングができるようにしましょう!!