CSSトランジション(hoverのなめらかな変化)

このレッスンでは、CSSトランジションを使ったなめらかな変化の演出方法を学び、洗練された印象のインターフェースを作れるようになることを目標にします。「CSS transition 使い方」で調べている方向けです。

transitionを指定すると、色や大きさが変わるとき「パッ」と切り替わるのではなく、なめらかにアニメーションしてくれます。マウスを乗せたとき(:hover)の変化と組み合わせるのが定番です。

サンプルコードでは、.btnにtransition: background 0.3s, transform 0.3s;を指定し、マウスを乗せると背景色の変化と拡大(transform: scale(1.1))の両方がなめらかに起こるようにしています。複数のプロパティをカンマ区切りで同時に指定できる点も確認してみましょう。

初心者がよくつまずくのが、transitionを指定する場所です。:hoverの側ではなく、通常の状態(.btn)側に書く必要があります。これは疑似クラスのレッスンでも触れた重要なポイントで、逆にしてしまうと期待通りの動きになりません。

transition: プロパティ 秒数;という短い1行を加えるだけで、サイト全体の印象が驚くほど滑らかで洗練されたものになります。手軽に見た目のクオリティを上げられる、覚えておきたいテクニックの1つです。