Help us understand the problem. What is going on with this article?

【CSS3】Transition(変化)関連のまとめ

はじめに

この記事は、HTMLとCSSの基礎知識がある方向けの内容です。
CSS3から変化するまでの時間などを指定できる、transition (トランジション)プロパティが追加されました。
ボタンにマウスカーソルを乗せたときに、色や大きさなどが変わる時間を設定するときに使われるプロパティです。
この transition プロパティと一緒に transform (トランスフォーム)という変形(移動・回転・伸縮・傾斜)に関するプロパティが一緒に使われます。

transform についてもまとめたので、詳しく知りたい方は下記をご覧ください。

@keyframesanimation についてもまとめたので、詳しく知りたい方は下記をご覧ください。

誤りがあれば、ご指摘頂けると嬉しいです((_ _ (´ω` )ペコ

transitionプロパティについて

transition(トランジション)は、直訳すると変化や移り変わりという意味です。
変化するまでの時間を設定するプロパティです。
transitionは、ショートハンドプロパティを含め5つのプロパティがあります。
ショートハンドプロパティのtransitionで一括て指定することも出来るし、それぞれのプロパティで個別に指定することもできます。

No プロパティ名 読み方 説明
01 transition-duration トランジション・デュレーション 変化が始まって終わるまでの時間を指定します。
02 transition-property トランジション・プロパティ 変化が適用されるCSSのプロパティを指定します。
03 transition-timing-function トランジション・タイミング・ファンクション 変化の度合いを指定します。
04 transition-delay トランジション・ディレイ 変化が始まる時間を指定します。
05 transition トランジション 上記の4つのプロパティを一括で指定できる、ショートハンド・プロパティです。

それぞれプロパティを見ていきましょう。

No.01 transition-duration プロパティ

transition-duration(トランジション・デュレーション)は、変化が始まって終わるまでの時間を指定できるプロパティです。
下記のように記述します。

CSS
セレクタ名 {
    transition-duration:;
}

値は、秒数またはミリ秒数で指定します。
単位は s または ms になります。

指定できる単位 英語 日本語 秒で換算
s second 1sは1秒
ms milli seond ミリ秒 1msは1000分の1秒

実際の表示結果を確かめる

CodePen の結果は、カーソルをマウスオーバーすると動作します。

See the Pen yRwOBR by 7968 (@b7968) on CodePen.

pタグにtransition-duration:3s;を設定しています。
マウスオーバーすると、横幅と背景色が3秒かけて変化します。

No.02 transition-property プロパティ

transition-property(トランジション・プロパティ)は、変化を適用するプロパティを指定できるプロパティです。
下記のように記述します。

CSS
セレクタ名 {
    transition-property:;
}

指定できる値は下記になります。

説明
all(初期値) トランジションの効果を適用できる全てのプロパティを指定します。
none どのプロパティも変化しません。
プロパティ名 トランジションを適用するプロパティ名を指定します。カンマ区切りで複数指定すること可能です。

実際の表示結果を確かめる

See the Pen GYeZRm by 7968 (@b7968) on CodePen.

pタグにwidth:50pxbackground-color:redを指定しています。
これで横幅は50pxになり、背景が赤になります。
次にtransition-duration: 2sを指定しています。
これでtransitionの効果が始まって終わるまでの時間が2秒になりました。
最後にtransition-property:widthを指定することで、transitionの効果が適用されるプロパティはwidthのみになります。

:hoverの擬似クラスにwidth:300pxbackground-color:blueを指定しています。
これでマウスオーバーしたときにサイズが300pxになり、背景が青になります。

マウスオーバーすると、横幅が300pxになり、背景が青になりますが、transitionの効果が適用されるのはwidthのみになります。
2秒かけて変化するのは、横幅のみになります。
背景色の指定にはtransitionの効果は適用されませんので、マウスオーバーするとすぐに青に変わります。

No.03 transition-timing-function プロパティ

transition-timing-function(トランジション・タイミング・ファンクション)は、変化の度合いを指定できるプロパティです。
下記のように記述します。

CSS
セレクタ名 {
    transition-timing-function:;
}

指定できる値は下記になります。
cubic-bezierは後で説明しますので、それ以外の値を見てください。

No 読み方 説明 cubic-bezierで表した値
01 ease(初期値) イーズ 開始時と終了時は緩やかに変化します。 cubic-bezier(0.25, 0.1, 0.25, 1.0)
02 linear リニア 開始から終了まで一定に変化します。 cubic-bezier(0.0, 0.0, 1.0, 1.0)
03 ease-in イーズ・イン 開始時は緩やかに変化、終了に近づくと早く変化します。 cubic-bezier(0.42, 0.0, 1.0, 1.0)
04 ease-out イーズ・アウト 開始時は早く変化し、終了時は緩やかに変化します。 cubic-bezier(0, 0, 0.58, 1.0)
05 ease-in-out イーズ・イン・アウト 開始時と終了時は、かなり緩やかに変化します。 cubic-bezier(0.42, 0, 0.58, 1.0)
06 cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値) キュービック・ベジェ 変化の度合いを3次ベジェ曲線で指定します。 -

cubic-bezier以外は、値を記述するだけで変化の度合いを指定できます。
おそらく、cubic-bezierで指定する機会は少ないかと思います。
cubic-bezierの説明で図が出てくるので難しそうな感じがしますが、全然難しくありません。
読めば理解できると思います。
前述したように使う機会は少ないと思いますので、ざっと読んで何となく理解しておけば問題ないかと思います。

cubic-bezierの指定について

cubic-bezierは前述した通り、変化の度合いを3次ベジェ曲線で指定します。
3次ベジェ曲線と聞くと難しそうな感じがしますが、Illustratorなどでベジェ曲線を使ったことがある方なら、どのように指定するかすぐに理解できると思います。

ベジェ曲線の基本的な説明は割愛します。
ベジェ曲線についての説明は、「中学生でもわかるベジェ曲線」がわかりやすいかと思いますので、ベジェ曲線についてわからない方は、ご一読ください。
実際にベジェ曲線を書いてみると、ベジェ曲線がどのようなものか感覚がつかめます。
Illustratorなどベジェ曲線が書けるソフトがない方は、ブラウザ上でベジェ曲線を練習できるWebサービスがあるので、そちらを利用してください。

3次ベジェ曲線とは、4つの点からなるベジェ曲線です。
2次ベジェ曲線は、3つの点からなるベジェ曲線のことです。
3次ベジェ曲線は、Illustratorで言うと、アンカーポイントが2つあり、ハンドルが2つある状態です。
ベジェ曲線を使ったことがある方は、3次ベジェ曲線を普通に利用しているかと思います。

img_bezier.png

初期値に設定されている値のeaseを3次ベジェ曲線で書くと下記のようになります。

img_cubic_ease_normal.png

それぞれの位置をわかりやすくするためにP0とP1の間と、P2とP3の間に青の線を引いてますが、これはベジェ曲線ではありません。
P0(始点)からP3(終点)までの線をベジェ曲線と呼びます。
Illustratorで言うと、P0とP3がアンカーポイントになり、P1とP2はハンドルになります。
P0とP1、P2とP3の4つの点でベジェ曲線を表しています。
cubic-bezierで指定する場合、P0とP3の位置は固定です。
その間のベジェ曲線で変化の度合いを表しています。
P0はx軸とy軸の0の位置にあり、P3はx軸とy軸の1の位置にあります。
easeの値をcubic-bezierで表すと下記のようになります。

CSS
cubic-bezier(0.25, 0.1, 0.25, 1.0)

cubic-bezierは、P1とP2のx軸とy軸の位置を指定します。
下記のように指定しています。

CSS
cubic-bezier(P1x軸の位置, P1y軸の位置, P2x軸の位置, P2y軸の位置)

改めてeaseのベジェ曲線を見てみましょう。

img_cubic_ease.png

easeの下にある数値はcubic-bezierで表したときの値です。
P1とP2の位置がどこにくるかわかりますよね。
4つの点をもとにベジェ曲線で表しているだけです。

他の値もベジェ曲線で表すと下記のようになります。

img_cubic_figure.png

これで、cubic-bezierの値をどのように指定するかわかったかと思います。
ただ、このようなベジェ曲線にするには、x軸とy軸はこの数値ということは、なかなか直感的にわかりません。
設定するときは、ジェネレータもしくはブラウザのデベロッパーツールを使うと直感的に値を知ることができます。

ジェネレータを使う

Ceaser」のWebサイト上でP1とP2の位置をドラックするだけで、値を知ることができます。

img_ceaser.png

デベロッパーツールを使う

GoogleChromeのデベロッパーツールでP1とP2の位置をドラックするだけで値を知ることができます。
Firefoxの開発ツールでも同じように操作して、値を知ることができます。

img_gc.png

cubic-bezierで値を指定するときは、ジェネレータもしくはデベロッパーツールなどを使ってみてください。

実際の表示結果を確かめる

See the Pen LEwMBW by 7968 (@7968) on CodePen.

マウスオーバーすると全て変化するようにしてあります。
それぞれの値がどのような変化の度合いになっているか見比べてみてください。

No.04 transition-delay プロパティ

transition-delay(トランジション・ディレイ)は、変化が始まる時間を指定します。
下記のように記述します。

CSS
セレクタ名 {
    transition-delay:;
}

時間は「No.01 transition-duration」と同じく秒数またはミリ秒数で指定します。
それぞれの単位については、先ほど説明したので割愛します。

実際の表示結果を確かめる

See the Pen KGEzwx by 7968 (@b7968) on CodePen.

transition-delay:2sを指定してるので、マウスオーバーして2秒後に変化します。
transition-duration: 3sを指定しているので、3秒かけて変化します。

No.05 transitionプロパティ

今までのプロパティをまとめて指定できるショートハンドプロパティです。
transitionプロパティの値に下記の順番で各値を指定します。

  • transition-propertyの値
  • transition-durationの値
  • transition-timing-functionの値
  • transition-delayの値

各値は半角スペースを空けて連続で記述します。

CSS
セレクタ名 {
    transition:transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値;
}

複数指定する記述

上記の記述では、一つのプロパティしかtransitionの設定ができません。
複数のプロパティに対してまとめて記述する場合は、カンマ区切りで指定します。

CSS
セレクタ名 {
    transition:transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値 , transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値;
}

記述例

実際の記述例を見ると理解しやすいかと思います。
秒数の指定で、0秒を指定するときは単位も記述してください。
CSSでは値が0のときは単位を省略することができますが、省略できるのは、長さを表すlength値です。
例えば長さを表すmarginやpaddingなどをは、margin:0と指定しても問題ありません。
今回は秒数を表すtime値になりますので、0のときでも単位を省略せずに記述してください。
単位省略しても、なぜかIE11では動作しますが、GoogleChromeやFirefoxなどでは動作しません。
0ではなく、0sと記述してください。

CSS
p {
    width:50px;
    background-color:red;
    transition:background-color 1s linear 0s , width 2s linear 0s;
}
p:hover {
    width:300px;
    background-color:blue;
}

See the Pen JmzXdo by 7968 (@b7968) on CodePen.

ブラウザの対応状況

最後にブラウザの対応状況を確認しましょう。
IE10以上から対応しています。
他のブラウザの対応状況は、プロパティ名をクリックすると「Can I use」という対応状況が記載されたWebサイトが表示されるので、そちらでご確認ください。

プロパティ名 IE8 IE9 IE10 IE11
transition × ×

最後に

CSSのTransitionに関する仕様は、W3Cの「CSS Transitions」に記載があります。
2015年9月現在、草案段階であり、仕様が変更になる可能性があります。
最新の情報は、上記のW3Cの仕様書(英語版)を確認してください。

note

note でも記事を公開してるので、興味がある方はご覧ください。

【初学者向けコードリーディング】 PHP の TODO アプリのコードを一緒に読み解こう

7968
学んだことを投稿していきます。誤りがあればご指摘ください。 note でも記事を投稿しています。
https://note.com/7968
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした