CSSのみでマウスオーバー時に動きをつける方法

例えばメニューバーのボタンにカーソルをのせたときなどに、なにかしらの変化があると、ユーザーにとっても使いやすくなります。

こちらは最も基本的な、マウスオーバー時の背景色を変える記述ですが、このままだと単純な変化しかつけることができません。

今回はCSSだけで簡単に実装できる、より動きのあるエフェクトをご紹介します。

要素が変化する時間を指定する

「transition」をつけることで単調な変化にならず、徐々に色が変化して柔らかい雰囲気を出すことができます。記述する際に、a:hover要素の方に記述してしまうと、カーソルを要素から離して変化が戻るときの「transition」の効果が適用されなくなってしまうので注意してください。

「all」はすべてのプロパティの変化に適用するということです。「all」を変化させたいプロパティの名前に変更することで、そのプロパティにだけ「transition」を適用させることも可能です。例えば、背景色はデフォルトの速さで変化させたいが、文字色だけ徐々に変化させたいときは「all」の代わりに「color」（文字色を指定するプロパティ）と記述します。

「1.5s」は変化する秒数を表します。数値を変えることで、変化のスピードも変わります。

使う色を工夫することで、さらに様々なタイプの変化をつけることができます。

要素の透明度で変化をつける

「opacity」は、要素の透明度を指定する際に使用します。hover時の「opacity」の値を１以下にすることで、要素が光るように見せることができます。

要素の大きさで変化をつける

「scale(1)」が基準です。hover時の「scale()」内に拡大したい倍率を指定することで、要素が拡大します。scale()の数字を１より小さくすることで、逆に要素を小さくすることもできます。

また、「scaleX()」で横方向のみ、「scaleY()」で縦方向のみを指定します。縦横の倍率が同じ場合は、片方省略して記述することも可能です。

要素を移動させる

「translate()」の中に移動させたい距離をピクセルで記述します。上記の記述だと、要素が右下に移動して、ボタンを押しているように見せることができます。左上に移動させたいときなどは、マイナスの値で指定をしましょう。

「translate」もXとYで縦方向、横方向のみの指定をすることが可能です。

まとめ

このように、CSSに「transition」や「transform」プロパティを使用することで、サイトデザインの幅が広がり、遊び心を取り入れることができます。

上記のサンプルコードをコピペして数値を変えるだけでも全く違う雰囲気になるので、自分のサイトのテーマに合った動きを探してみてください。