ふんわりと色を変えることができるtransitionプロパティ - nicepaper @ ウィキ

要素(aタグやboxなど)をホバーしたときにゆっくりと背景色や文字色が変わっていったら少し先進的に見えますよね？今回はこれができるtransitionプロパティについて解説していきます。

イメージ

例えば、赤いボックス(左)をホバーした時に緑色に変化させる事は疑似要素を使う事によって従来でも実現できます。しかし、transitionプロパティを使用する事によって 変化途中、どのように変化していくのか？ を指定する事ができます。

目次

transitionの基本

transitionプロパティは、時間的変化を指定する際に使われるプロパティです。色や幅や高さなどCSSで指定したプロパティを時間的経過とともに変更させることができます。今回は色を中心に話を進めていきますが、時間がある方や他のプロパティでも試してみたいという方はぜひ試してみてください。
今回はboxを変化を見えやすくするためboxを使って説明します。

コード

transitionプロパティはちょっとした動作を伴うので、みなさんも是非コードを実際に書きながら確認して進んでみてください！！
それではコードを書いてみましょう。
HTML

<div id="transition_sample">
  <p>transitionの解説</p>
</div>

CSS

#transition_sample {
  height: 200px;
  width: 200px;
  border: 2px solid #333;
  background-color: #ff0000;
}
#transition_sample:hover {
  transition: background-color 1s 1s ease-out;
  background-color: #00ff00;
}

お！！ってなりますね(笑)
それでは解説していきます。
まず、一つのboxを用意します。
次にhoverした後の記述も先にしておきましょう。
最後に

transition: background-color 1s 1s ease-out

の一行を加えます。
この一行を加えるだけなので、この一行の意味を解説していきますね。
この一行は以下のように書き換える事ができます。

/*transitionを適用するプロパティを指定しています*/
transition-property: background-color;
/*マウスをhoverしてから何秒後にtransitionを実行するのかを指定しています*/
transition-delay: 1s;
/*transitionを何秒間かけて実行するかを指定しています*/
transition-duration: 1s;
/*transitionをどのように実行するかを指定しています(どのように変化するか)*/
transition-timing-function: ease-out

この五行をひとつにまとめた形を一行で記述したのです。
delayとdurationは共に、ms、sの単位で指定でき、一行にまとめる際には順番を逆にしてしまうと思うように適用されなくなってしまうので注意が必要です。
どのプロパティに、いつから、どのくらいの時間で、どのように と覚えておくと間違えがなくなります。

timing-functionプロパティについてはこちらのページをご覧ください。

• 以上