こんにちは。
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段階上のコーディングができるようにしましょう！！
