トランジション、遷移と言ったりします。トランジションとは、あるスタイルを別のスタイルへスムーズに変化させる効果のことです。FlashやJavaScriptを使用せずにスタイルの変化を表現できます。トランジションでは、プロパティの値を変化させることで遷移を表現できます。そのためには、以下の事を指定する必要があります。
１．効果を摘要するプロパティと、その開始時の値と完了時の値
２．変化にかける時間
トランジション効果を摘要するプロパティは、transition-propertyプロパティで指定して、変化にかける時間はtransition-durationプロパティで指定します。
transition-propertyの値の指定方法
・none 変化するプロパティはなし
・all トランジション効果を適用できる全てのプロパティを変化させる。
プロパティ名 変化させてたいプロパティ名を指定します。複数のプロパティを変化させる場合はカンマで区切って書きます
transition-duration
トランジション効果表現するには、変化させたいプロパティの指定と、変化にかける時間を指定する必要があります。この時間はtransition-durationプロパティで指定します。
値の指定方法
・時間
変化が完了するまでの時間を、秒(s)または、ミリ秒(ms)で指定します。
複数のプロパティを時間をかえて変化させる場合は、それぞれに体操する時間をカンマ「,」で区切って書きます。
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>トランジション効果を付けてみる</title> <style> *{margin:0;padding:0;} .container{ width:256px; height:32px; background-color:yellow; text-align:center; } .traBgColor{ /* 変化をつけたいプロパティを指定する */ -webkit-transition-property:background-color; transition-property:background-color; /* 変化をつけたいプロパティを何秒かけて 変化させるかを指定する */ -webkit-transition-duration:2s; transition-duration:2s; } .traBgColor:hover{ /* カーソルを乗せて、transition-durationで指定した 秒数を経過したあとの背景色を指定 */ background-color:blue; } .traSize{ /* 変化をつけたいプロパティを指定する */ -webkit-transition-property:width,height; transition-property:width,height; /* 変化をつけたいプロパティを何秒かけて 変化させるかを指定する 1秒かけて、widthを変化させ 3秒かけて、heightを変化させる */ -webkit-transition-duration:1s,3s; transition-duration:1s,3s; } .traSize:hover{ /* カーソルを乗せて、transition-durationで指定した 秒数を経過したあとの幅を指定 */ width:512px; height:128px; } </style> </head> <body> <div class="container traBgColor"> <p>カーソルを乗せて背景色変化</p> </div> <div class="container traSize"> <p>カーソルを幅を変化</p> </div> </body> </html> |
サンプルコードはdiv要素を２つ用意して、div要素の１つは背景色の変化、もう１つは幅、高さを変化させます。