ここでは、transitionプロパティを使いこなすために必要な知識を身に着けていきます。今まで何となくコピペで使ってきたという方も、ここで使い方をマスターしましょう。CSS3には動きが表現できるプロパティとしてanimationプロパティなどもありますが、transitionプロパティはマウスオーバー(:hover)などのトリガーをきっかけに動きが始まるのが特徴です。
コンテンツ
transitionプロパティの使い方
transitionプロパティには、下記の４つのプロパティとそのショートハンドがあります。まずは下記の表をご覧ください。
| プロパティ | 説明 | 初期値 |
|---|---|---|
| transition-property | 変化させたいプロパティの指定 | all |
| transition-duration | 変化が開始してから終わるまでの時間 | 0 |
| transition-timing-function | 変更速度の指定 | ease（滑らか） |
| transition-delay | 変化がいつ始まるかを指定 | 0 |
| transition | 上記をまとめたショートハンド |
ちょっとややこしそうな感じがしますが、ひとつずつ見ていきましょう。
プロパティの指定をするtransition-property
transition-propertyは、transitionを適用させたいプロパティを指定するプロパティです。値のところには、border, font-size, widthなど、transitionを効かせたいCSSプロパティを指定します。初期値はallになっているのですべてのプロパティが有効になります。複数指定する場合はカンマ「,」で区切ってください。
下記にサンプルを用意しました。
ボタンで表示を切り替えてご覧ください。
See the Pen transition-property by kenichi (@ken81) on CodePen.
上記は、transition-propertyプロパティにそれぞれボックス内に表示されたプロパティを指定したサンプルです。ボックスをマウスオーバーして、どのプロパティが変化するか確認してみてください。
変化にかかる時間を指定するtransition-duration
transition-durationは、変化が開始してから終了するまでの時間を指定するプロパティです。単位は「秒(s)」または「ミリ秒（ms）」で指定します。例えば、1秒で変化させたいときは1sとなります。初期値は0になっています。
See the Pen transition-duration by kenichi (@ken81) on CodePen.
上記は背景色の変化にかかる時間をそれぞれ、０秒、１秒、２秒、３秒、４秒に設定したボックスです。
変更速度の指定をするtransition-timing-function
transition-timing-functionは変化のスピードの移り変わりを指定するプロパティです。下記のような値で指定できます。
| 値 | 説明 |
|---|---|
| ease | 開始と終了を滑らかに |
| linear | 一定の速度で |
| ease-in | ゆっくり始まる |
| ease-out | ゆっくり終わる |
| ease-in-out | ゆっくり始まりゆっくり終わる |
実際にどのような変化になるのか、下記のボックスにマウスオーバーして確認してみてください。
See the Pen transition-timing-function by kenichi (@ken81) on CodePen.
変化がいつ始まるかを指定するtransition-delay
transition-delayは、マウスオーバーなどをしてから変化が始まるまでの時間を指定するプロパティです。これもtransition-durationプロパティと同じ様に「秒(s)」または「ミリ秒（ms）」で指定します。下記にサンプルがありますので、マウスオーバーしてから変化するまでの時間差を確認してみてください。
See the Pen transition-delay by kenichi (@ken81) on CodePen.
transitionプロパティ
最後は、今までご紹介したプロパティをショートハンドできるtransitionプロパティです。値の説明は大丈夫だと思いますので、値を半角スペースを空けて下記の順番で指定します。
ショートハンドで値を指定する順番
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
transition: property duration timing-function delay;
transitionプロパティのブラウザ対応状況は？
transitionプロパティは、よくベンダープレフィックスで記載される方法が紹介されていますが、今現在どうなっているのか確認してみましょう。下記は現在のリアルタイムなブラウザの対応状況です。
この記事を公開した時点から状況が変わっている場合もありますので、上記のブラウザの状況に合わせてベンダープレフィックスの必要・不必要を決めてくださいね。
ブラウザ対応状況の詳しい説明は下記の記事をご参照ください。
