「transition」と聞いて、「あのプロパティね」とすぐに思い出す人は初学者はほとんどいないのではないでしょうか?初心者向けのCSSテキストがあれば、最初に学習するプロパティとは言い難いでしょう。CSS3で導入されたこのプロパティは、デザインに動きをつける効果(アニメーション)がり、身につけるとデザインの幅が確実に広がります。難しそう、と思った人も安心してください。それほど難しいプロパティではありません。「transition」の基礎的動きを身にけることの学習コストは意外と低く、これまでjavascriptで実装していた単純な動的機能がCSSだけで実現するので、一度挙動を確認するだけでも価値があります。これは初学者向けに書いていますので、既にCSSでアニメーションを作ってきた経験者は読み飛ばしても構いません。まとめTransitionとは何かtransitionの定義CSS3で新たに追加され、時間によるプロパティの変化を表現します。これはアニメーション効果の一つですが、複雑なデザインや時間的変化を表現するというよりは、非常にシンプルに2点間の変化を表現する時に適したCSSプロパティです。transition単体で使用されるケースもあるのですが、一般的には、transformプロパティなど、別のアニメーション効果のプロパティと一緒に設定する場合が多いかもしれません。「transition」とは、2点間のアニメーション(動き)を出すことができますが、実際に見た方が理解しやすいです。以下は、transitionの効果です。画像のキャプションににtransition効果を適用した例このような機能が今やCSSだけで作れます。これら以外にも、transitionが使われる場面は増えています。このように特定のプロパティに時間とともに動きを与えることは「transitionプロパティ」が得意とするところです。transitionを使用するケース一般には、transitionは以下のようなケースで使われます。ボタンのデザイン画像のホバーエフェクトnavbarのnavメニューのデザインレスポンシブデザインにおけるnavbarの伸縮効果transitionの使い方transitionプロパティの説明transitionは、プロパティとして、4つの専用プロパティが用意されています。ここにプロパティを設定することで、そのプロパティに動きがつくようになります。プロパティは複数個設定が可能です。「all」を設定すると、全てのプロパティに動きがつきます。「動き」の継続時間を設定します。動きの開始から終わりまで何秒かけるかを秒単位(s)かミリ秒単位(ms)で指定します。これを設定することで遅れて動きが始まります。動きが始まるまでの時間を設定します。これも秒単位(s)かミリ秒単位(ms)で指定します。動きの速度の変化を設定できます。初期値はeaseというものですが、これ以外にもlinear(一定速度の変化)、ease-in(最初ゆっくり、後にはやく変化)、ease-out(最初は速く、後にゆっくり変化)などがあります。個別指定と一括指定transitionプロパティは、それぞれを設定する方法と、一括で設定する方法の2つがあります。初学者はプロパティの種類と効果を理解するために最初は個別指定でも構いません。いずれはコードの見やすさ、短縮化を考えると一括指定をお勧めします。各transitionのプロパティは、省略することも可能です。「transition-timing-function」の値を省略したい場合は書く必要はありません。省略した場合は各プロパティの初期値が適用されることは覚えておいてください。次に、一括で指定する場合は、順番は気にする必要がありませんが、「transition-duration」と「transition-delay」プロパティについてだけは、「duration」→「delay」の順番で指定してください。アニメーション効果;}動きの開始と終了の設定さて、このtransitionプロパティは、動きと開始と終了を想定する必要があります。その際、2つの方法のどちらかで設定しますが、初学者の方は1を参考にしてください。以下のような設定が一般的です。#2ca9e1;}このように、transitionで動きを付ける場合は、「:hover」などのきっかけを必要とします。transitionプロパティの説明transition-property上記では、backgroundを指定して、動きをつけましたが、他のプロパティを指定することもできます。colorを設定すれば、colorの色を変化させることができます。「hover」を設定し、「hover」した後の色の指定をします。今回は、色の指定と背景色の設定を変更しています。変化の継続時間]とします。#69821b;}transition-durationこの色の変化の時間は変更することができます。それが「transition-duration」の役割です。変化が始まり、終わるまで何秒かかるかを設定します。今回、「2s」を「0.5s」としてみましょう。この「0.5s」は「.5s」とかくこともできます。#69821b;}transition-delayこれは、開始時間を遅らせるプロパティです。以下は、3秒間動きが継続しますが、その動きは2秒後に始まります。#69821b;}transition-timing-functionこれは、変化の速度を変化させるプロパティです。最初は速く、後に遅くなど動きの途中の速度を変えることができるのです。同じ速度で直線的な動きを表現する。最初はゆっくり、最後は速い動きを表現する。最初は速く、最後はゆっくりとした動きを表現する。最初は動きがゆっくり、途中で速くなり、最後はまたゆっくり動く変化を表現する。easeを多少早めた動きを表現する。ベジェ曲線のような動きを表現する。ここでは、「ease-in」を試してみましょう。#69821b;}時間が経てば、速度が変わり速くなっていることがわかります。実践:tansitionを利用したデザインtransitionで何ができるのか、少し実感がわかってきましたね。ここでは、実際に画像にキャプションをつけて見ましょう。以下の画像を作成します。画像とキャプションのHTMLを設定しましょう。<p>桜の下に犬がいます。</figcaption></figure>以下のような表示となります。」に「absolute」を設定することで、キャプションの場所を設定します。その位置を「hover」をきっかけに動かすという設定をするというものです。-100;」にすることで、画像の下にキャプションを配置しておき、「hover」をきっかけにこのキャプションを上に移動させる処理をしています。0;}まとめ必ずどこかで見た効果がこの「transition」でできていることがわかった人もいたでしょう。これをマスターすれば、デザインスキルの幅が広がることもわかったと思います。簡単にCSSだけで作れるので、是非ともマスターしてください。おすすめ記事【無料あり】本気でおすすめしたいプログラミングスクール3つ【実際に受講した】おすすめ記事IT業界に強い転職サイト・転職エージェントのオススメはココ!【比較ランキング】この記事が気に入ったらいいねしよう!最新記事をお届けします。陽介ベトナムで起業し、HR関連のコンサルティング業務をやっています。日本を離れて8年が経ちますが、日本ではあり得ないハプニングを楽しんでいます。RailsでWebサービスを作っています。