CSSたった1行でhover時にふわっとさせる方法

CSSをたった1行追加するだけでhover時にふわっとさせる方法を紹介します。

使いこなせばオシャレなWebページを作れること間違いなしです！

hover時に色や大きさを変える方法

まず前提として、hover時に色や大きさを変えるには擬似クラス「:hover」を使用します。

See the Pen Untitled by Usagi (@naniwa_usagi) on CodePen.

See the Pen Untitled by Usagi (@naniwa_usagi) on CodePen.

ふわっとさせるにはtransitionプロパティを追加するだけです。

transitionに指定する値は状態の変化にかかる時間です。

以下のサンプルではtransition: 1s;としていますので、1秒間かけて見た目が変化していきます。

transitionに指定する値は単位"s"が抜けていると機能しないため注意しましょう。

hover時にふわっとさせる方法はCSSを1行追加するだけでした。

ここからは応用編です。

transitionプロパティには2つ目の設定値「待機時間」を設定することができます。

以下の例では2つ目に「.5s」と設定したので、状態変化が起こるまでに0.5秒数待機することになります。

1秒未満は「.5s」のように0を省略することができます。

色と大きさを個別に設定したい時はCSSプロパティ名を秒数の前に記述します。

以下の例では色の変化に0.5秒かかり、大きさの変化に3秒かかることになります。

最後に、transitionプロパティを使ったサンプルを紹介します。

背景色と文字色の変化を組み合わせることでマウスホバー時に見た目が変わるオシャレなボタンやタブを作成することができますよ！

是非試してみてください。