一工夫でこんなに映える！ホバーアニメーションのアイデア8選

Webサイトでユーザーが操作可能な要素に必須と言っても過言ではないホバーアニメーション。

ホバーアニメーションは、ユーザーにその要素が操作できることを伝える重要な役割を果たしています。また、アニメーションの一つとして取り入れることで、サイトの質をぐっと上げる効果もあります。

ただ、実装者にとっては悩みの種になりうるのも事実。ホバーアニメーションのマンネリ化に困った経験のあるマークアップエンジニアはたくさんいるはずです。

そこで、今回はHTMLとCSSで簡単に実装できるホバーアニメーションのアイデアをご紹介します。

基本のアニメーション4選

まずは、基本となるアニメーションを4つご紹介します。

色を変えてみる

マウスホバーした時に文字の色や背景色が変わります。

世の中にあるホバーアニメーションの半分くらいはこれといっても過言ではないほど、よく使われている手法です。

要素を大きくする

transformプロパティを使って要素を拡大しています。

LPのコンバージョンボタンでよく用いられているイメージがあります。

また、カード型UIをホバーした時に画像の部分が拡大するようなアニメーションも、同じような要領で実装できます。

透明度を変える

ホバーした時に要素の透明度が下がります。

主に画像がメインのコンポーネントのホバーアニメーションによく使われています。

ラインを動かす

シンプルながらスタイリッシュな印象のあるホバーアニメーションです。

一見複雑に見えますが、やっていることは親要素にoverflow: clipを指定した上で、擬似要素を左右に動かしているだけなので、至ってシンプルです。

応用のホバーアニメーション4選

ここからは、さらに踏み込んで応用編のホバーアニメーションについてご紹介いたします。

アイコンを動かす

ボタンなどのUIで、あしらいとしてアイコンがついていることがありますが、これを動かしてみるのも一つの手です。

ノベルティのコーポレートサイトでも使われている箇所があります。

ドロップシャドウを活用する

ドロップシャドウの濃さを調整することで、ホバーするとふわっとした感じになります。

また、ドロップシャドウには違った活用法もあります。

透明度が100%・ぼかし0で立体感のある要素にした上で、ホバー時にbox-shadowを0にすることで、要素を押し込んだようなアニメーションを実現することも可能です。

グラデーションを動かす

ホバーするとグラデーションが動いたように見えるアニメーションです。

このようなアニメーションを作る際には、background-imageに対してtransitionは効かないという点に注意が必要です。そのため、background-imageを直接変更するといったことはせず、代わりに擬似要素でグラデーションののり弁を用意して、ホバーした時にそれを背景に表示させる、と言った形でグラデーションが動いたように見せています。

きらりと光らせる

ホバーすると要素がきらりと光るホバーアニメーションです。

透明度が100%から0%になるグラデーションを擬似要素に適用し、ホバー時にそれを動かす形でこの動きを実現させています。

グラデーションは無限の可能性を秘めていることがよくわかりますね。

ホバーアニメーションを実装する時の注意点

要素に対して普通に:hoverを指定した場合、スマートフォンやタブレットなどのタッチデバイスでもホバーアニメーションが動いてしまいます。

対策としては、@media (any-hover: hover)を指定することで、ホバー操作が可能なデバイスを使っている場合にのみホバーアニメーションを設定することが可能なので、ホバーアニメーションを実装する際はできるだけ、これを使うようにしましょう。

まとめ

いかがでしたでしょうか。

今回はひと工夫で映えるホバーアニメーションを紹介しました。

「細部に神が宿る」まさにこの言葉がピッタリ当てはまります。ワンランク上の表現を取り入れて、細部に神が宿ったサイトを作ってみてはいかがでしょうか？