Web制作でリッチなサイトを演出する際によく使う、「transition」プロパティの解説をしていきたいと思います。
目次
transition（-×××××）プロパティ
transitionとは、日本語で「遷移」という意味になり、CSSの世界では「変化」を意味します。
transitionプロパティのCSSでは、大きく分けて二種類の書き方があり、「transition」と「transition-×××××」になります。
「transition」プロパティは一括指定プロパティになりますので、まずは個別でしていく「transition-×××××」の方から解説していきたいと思います。
transitionを利用する大前提
まず大前提ですが、transitionは変化を指定するプロパティですので、変化後の「after」のCSSを用意しておかなければなりません。
ですので、afterを設定されていなければ実装されませんので、その点ご注意ください。
そのafterの設定には、擬似クラスかJavaScriptを利用する事が必要になります。
ちなみに、今後の解説は擬似クラスの「::hover」を利用してまいります。
擬似クラスの事がわからない方は、以下の記事よりご確認ください。
-
[CSS]擬似要素と擬似クラスの意味や注意点、メリットデメリットなどを解説します！【ホームページ制作入門講座】
続きを見る
それでは、以下のコードをベースに解説して参りたいと思います。
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="transition_css1">サンプルテキスト</div> <style> .transition_css1{ color:red; background: pink; } .transition_css1:hover{ color: black; background: cyan; } </style> |
実装例
なお、transitionは「ベース」「after」のどちらに適用しても動作しますが、今回は「ベース」のプロパティに適用させていきたいと思います。
transition-property
「transition-property」プロパティは、効果を適用させるプロパティを指定します。
上の例で言うと、「color」「background」などが指定するプロパティにあたります。
transition-property: color;
transition-property: background;
なお、「transition-property」のみではプロパティを指定しているだけで変化の内容が指定されていないので、何も起こりませんので、以下の詳細設定を併記する必要があります。
逆に、以下の効果を適用しているが「transition-property」自体を設定しない場合は、「transition-property: all;」と同じ扱い、すなわち、「全プロパティ」を対象として効果がかかるようになります。
transition-delay
transition-delayプロパティは、変化がスタートするまでの時間を指定します。
delayは「遅れ」という意味になります。
以下の例では、「transition-property: color;」にて文字色だけにtransition効果を与えています。
ですので、カーソルを乗せると、文字色だけ3秒後に効果が当たるようになっています。
ちなみに効果が外れるのも、カーソルが外れた3秒後になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="transition_css2">サンプルテキスト</div> <style> .transition_css2{ color:red; background: pink; transition-property:color; transition-delay: 3s； } .transition_css2:hover{ color: black; background: cyan; } </style> |
実装例
時間の単位「s」
ここで一応確認しておきますが、上記の「transition-delay: 3s;」の「s」は、英語のsecond（秒）の頭文字になります。
他にも、よく時間の単位で「ms」も利用されますが、こちらは milli second（ミリ秒）の頭文字をとった形で「1000分の1秒」を表します。
| 単位 | 原文 | 意味 |
| s | second | 秒 |
| ms | milli second | ミリ秒 |
transition-duration
transition-durationプロパティは、変化が完了するまでの時間を指定します。
durationは、「期間」という意味になります。
以下の例では、「transition-property: background;」にて背景色だけにtransition効果を与えています。
ですので、カーソルを乗せると、背景色だけ3秒かけて効果が当たるようになっています。
上記同様に、効果が外れるのもカーソルが外れた3秒後になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="transition_css3">サンプルテキスト</div> <style> .transition_css3{ color:red; background: pink; transition-property:background; transition-duration:3s; } .transition_css3:hover{ color: black; background: cyan; } </style> |
実装例
transition-timing-function
transition-timing-functionプロパティは、変化の「かかり方」を指定する事ができます。
| linear | 均等に変化 |
| ease | スタート・エンドは徐々に変化 |
| ease-in | スタートは徐々に、エンドに向かって加速 |
| ease-out | スタートは加速し、エンドは徐々に変化 |
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 | <div class="transition_css4">ease-in</div> <div class="transition_css5">linear</div> <style> .transition_css4{ width:20%; background: pink; transition-property:width; transition-duration:3s; transition-timing-function: ease-in; } .transition_css4:hover{ width:100%; } .transition_css5{ width:20%; background: pink; transition-property:width; transition-duration:3s; transition-timing-function:linear; } .transition_css5:hover{ width:100%; } </style> |
実装例
transitionプロパティ
ここまでは、「transition-×××××」という、変化をつけるプロパティの指定とそのかけ方の詳細をご説明してきました。
実際にCSSでtransitionの指定をする際には、今までご紹介してきたものを書いていく事は全然間違った事ではありません。
しかし、今から説明する「transition」プロパティは、一括指定プロパティと呼ばれるもので、今まで紹介してきた設定を、全て一括で指定する事ができる便利なプロパティです。
transitionの指定は色々複数にまたがる事も多いですので、一括指定プロパティを活用する事で単純に作業スピードが上がりますので、あくまで、上記「transition-×××××」を理解した上で、便利表記として活用していくようにしましょう。
記載方法は、「transition」プロパティに対して、「値」に「transition-×××××」の「property,duration,timing-function,delay」の順番に半角スペースを空けながら記載すればOKです。
ただし、「duration」と「delay」は同じ「時間の単位」になっていますので、記載の順番は要注意です。
時間が1個だけの場合は「duration」扱いになりますので覚えておきましょう。
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="transition_css7">サンプルテキスト</div> <style> .transition_css7{ width:20%; background:pink; transition: width 4s ease-in 1s; } .transition_css7:hover{ width:100%; } </style> |
実装例
まとめ
いかがでしたでしょうか？
サイト制作において、transitionの指定というのは絶対に使用しなければサイトに支障が出るというものではありません。
ですので、初心者のうちは無理に実装しなくてもやっていけますが、もっとリッチなデザインにしたいという気持ちが強くなってくると欠かせないものとなります。
しっかりと、まずは「transition-×××××」プロパティの事を理解した上で、「transition」プロパティを使って効率化をはかっていくようにしましょう。
