はじめに
HTML,CSSをある程度勉強したし、そろそろJavaScript（jQuery）でも勉強しようかなーと思っていませんか？
いや、ぜひJavaScriptは勉強してください。
しかし、まず基礎となるCSSで何ができるかぐらいは分かっておいたほうがいいと思います（自分に向けて）。
ということで、まずCSSで変化をつけるための基礎となるプロパティ、transitionの使い方を備忘的にまとめます。
目次
- この記事の対象
- transitionとは
- transitionプロパティの使い方
- 1.transition-property
- 2.transition-duration
- 3.transition-timig-function
- 4.transition-delay
- おわりに
記事の対象
- WEBアプリ作成したくてProgateやその他でHTML,CSSを学び、ある程度自分の思い通りのレイアウトを作れるようになった。
- コピペでそれっぽい動きのあるものを作っていた。
-
transitionというプロパティがあるのは知っているけど、使い方が実際よく分からない。
という方（自分）に向けて書きます。
実践的な内容ではありません。
transitionとは
transitionはCSSアニメーションのひとつであり、動きに変化をつけるためのプロパティです。
具体的には何かアクションが行われたときやプロパティが変化するときなど、例えば
- マウスカーソルをボタンに乗せたとき
- クリックしたとき
など
つまり、疑似クラスである:hoverや:activeなどと組み合わせて使います。
疑似クラスだけでも変化をつけることはできますが、それに加え変化をどのように行うか、どのぐらい時間をかけて変化するか指定することでアニメーションと呼ばれる挙動をとることになります。
それを指定するのがtransitionです。
また、animationというプロパティともよく一緒に使われます。こちらは疑似クラスよりも変化を自由に指定できるプロパティです。
transitionプロパティの使い方
transitionは:hoverなどと一緒によく使われるので、:hover側に指定したくなるのですが（自分が）、CSSを適用させたい元のCSSで指定します。
セレクタ{
background-color: black;
color: white;
transition: all 0.3s;/** こっちに記述 **/
}
セレクタ:hover {
background-color: white;
color: black;
/** こっちじゃない **/
}
transitionプロパティの種類
transitionにはショートハンド（参考：CSSのショートハンド）を除くと4つのプロパティが用意されています。
よくショートハンドで使われるのを見ますが、まずは4つのプロパティひとつひとつを指定してしっかり役割を覚えたいところです。（自分に向けて）
| No | プロパティ名 | 説明 |
|---|---|---|
| 1 | transition-property | 適用されるCSSプロパティを指定。 |
| 2 | transition-duration | 変化が始まってから終わるまでの時間を指定。 |
| 3 | transition-timing-function | 変化の仕方を指定。 |
| 4 | transition-delay | 変化が始まる時間を指定。 |
| # | transition | ショートハンドプロパティ。一度に上の4つの値を指定できる。 |
では以下で詳しく説明します。
1.transition-property
適用されるCSSプロパティを指定するプロパティ（ややこしいですね）。
指定できる値は
| 値 | 説明 |
|---|---|
| all | プロパティ全てに適用される。 |
| none | どのプロパティも適用されなくなる。 |
| プロパティ名 | transitionを指定できるプロパティをひとつに適用する。 |
以上の3つです。
:hoverなどではallで指定されるのをよく見かけますね。
表示結果
See the Pen transition-property by fumu (@fumu238) on CodePen.
上のback-colorの箱はtransition-propertyにbackground-colorだけを指定しています。
想像がつくかとは思いますが、このプロパティは、プロパティを指定するだけのものですので、これ自体ではホバー時の変化の仕方は変わりません。
transition-durationを一緒に指定してあげることで、指定したbackground-colorだけが、3秒かけて変化していますね。文字色はホバーされた瞬間に変わります。
下のallの箱は、allを指定しているので、background-color、color共に3秒かけて変化します。
2.transition-duration
変化が始まってから終わるまでの時間を指定するプロパティ。つまり変化にかける時間を指定します。
時間指定なので、単位を指定してあげます。
指定できる単位は
| 単位 | 説明 |
|---|---|
| s | second。つまり秒。10sで10秒です。 |
| ms | milli second。 つまりミリ秒。500msで0.5秒です。 |
0.1sなど小数でも指定できるので、sのほうが使いやすいかと思います。
transition-propertyのほうでも出てきましたが、一応こちらも使用例を
表示結果
See the Pen transition-duration by fumu (@fumu238) on CodePen.
BOX1はtransition-durationが4sで指定してあるので、4秒かけてホバー時のプロパティの値に変化します。
BOX2は1sなので、より速い変化です。
ちなみにtransition-propertyを指定しないとallを指定することと同じになり、全てのプロパティに適用されます。
3.transition-timming-function
変化の仕方を設定するプロパティ。
個人的に最近知ったのでよく最初はよく分かりませんでした。
指定できる値が多く覚えるのが大変ですが頑張りましょう（自分に向けて）。
| 値 | 説明 |
|---|---|
| ease(デフォルト) | 開始時と終了時は緩やかに変化。 |
| linear | 開始から終了まで一定の変化。 |
| ease-in | 開始時は緩やかに、終了時に近づくにつれ速く変化。 |
| ease-out | 開始時は速く、終了に近づくにつれ緩やかに変化。ease-inの逆 |
| ease-in-out | 開始時と終了時はとても緩やかに変化。 |
| cubic-bezier | 変化の度合いを3次ベジェ曲線で指定。 |
transition-timing-functionを指定しない場合は、全てeaseが適用されている状態となります。
たくさんあって覚えづらいですが、easeは「緩やか」と覚えておけばなんとかなるはず。
cubic-bezierは3次ベジェ曲線と呼ばれるちょいムズな線で変化を決めるものなので、余裕があったら覚える程度でいいと思います。
GoogleChromeのデベロッパーツールを使用するとこの線がどんなものか触って確かめることができますが、今回は割愛します。
表示結果
See the Pen timing-function by fumu (@fumu238) on CodePen.
※要素のどこにホバーしても一斉に変化します。
5つ全てtransition-durationは3sを設定していますが、かなり変化の仕方に差が出ているのが分かります。
なんなら絶対これ3秒以上かかってるだろみたいなものもありますが、全て3秒です、多分。
自分の好みや、目的によって使い分けをしていくことで実践的に使えるようになりたいところです。
4.transition-delay
変化が始まるまでの時間を指定するプロパティ。
時間差で規則的な変化をつけたい場合などに有効かと思われます。
時間を指定するのでtransition-durationと同じくs(秒)またはms（ミリ秒）で指定できます。
表示結果
See the Pen rNVwKGa by fumu (@fumu238) on CodePen.
※要素のどこにホバーしても一斉に変化します。
上から順に0.1秒ごと加算しているので、規則正しく順番に変化していきます。
これとtransition-delayとtransformなどを組み合わせると面白い変化をするオブジェクトを作れそうです。
おわりに
CSSにで簡単にアニメーションができるようになるtransitionの使い方まとめでした。
これをいかに他のCSSと組み合わせていい感じの変化にできるかが大事かと思います。
とにかく試しまくって覚えていくしかありませんね。