ぬるっと動く！CSSホバーアニメーション７選[コピペあり]

2020/01/22

web

「CSS のホバーアニメーションを作成したい。」
「hover 時に、アニメーションするボタンを作成したい。」

この記事はそんな方に向けて書いています。

どうもー。ホバーアニメーションは CSS で制作したい派のガッチ（@gatchsite）です。

WEB 制作を 10 年以上やっていると「CSS でアニメーションできる幸せすぎる ♪」と、ここぞとばかり CSS アニメーションを使いたくなるんですよね笑

今回はボタンなどでよく使われる hover（ホバー）時の使いやすいシンプルなサンプルをまとめました。

ぜひサンプルを使って CSS の面白さに触れ、自身の WEB サイトのちょっとしたアクセントに役立ててもらえたら嬉しいです。

記事の内容はこちら

ホバーアニメーションの作り方

アニメーションというと、ちょっと難しそう^^;と思ってしまうかもしれませんが、

安心してください。履いてますよ

安村さん並みにアグレッシブにせめても「CSS のコードは１行だけ！」というシンプルさが CSS ホバーアニメーションのメリットです。

hover（ホバー）とは

WEB 業界では、マウスのポインターを合わせることを「hover（ホバー)」と言います。

hover は、空中に停止するという意味があり、特定の HTML タグの上でマウスポインターを停止させるから。その名前がついたんでしょうか。

ホバーのスタイルを指定する CSS 擬似要素「:hover」

a タグのスタイルで使ったことがある方も多いのではないでしょうか。

以下のような書き方で「通常時のスタイル」「マウスを合わせた時のスタイル」を変えることができます。

/* 通常時のスタイル */
a {
  color: #fff;
}
/* マウスを合わせた時のスタイル */
a:hover {
  color: #000;
}

ホバーアニメーションでは、この :hover を使って実現させていきます。

※JavaScript を利用してスタイルを切り替える方法もありますが、この記事では紹介していません。

スタイルの間を埋めてくれる CSS3 の「transition」

transition は「移り変わり」の意味を表しています。

transition を指定することで「通常時のスタイル」から「マウスを合わせた時のスタイル」までのスタイルの移り変わりを補ってくれます。

「とっても便利！」

/* 通常時のスタイル */
a {
  color: #fff;
  transition: color 0.2s 0 ease-out; /* アニメーションを指定 */
}
/* マウスを合わせた時のスタイル */
a:hover {
  color: #000;
}

上記は、ホバーした時の color が白から黒に切り替わるサンプルです。

transition を設定していない場合パッと一瞬で色が切り替わるのに対して、
設定した場合は 0.2 秒かけて黒 → グレー → 白と色が変化するように表現してくれます。

CSS ホバーアニメーション７選[ボタン/サムネイル]

全てマウスホバーで動作するようにしています。
※スマホの場合は、タップすると動作します。

CSS ホバーアニメーション ① ボタンを浮かせる

シンプルなアニメーションで、どんなサイトでも使えるサンプルです。

影も少し落としてホバー時に少し浮いたように見せています。

<button class="hover-1">ボタンサンプル</button>
<style>
  .hover-1 {
    display: block;
    width: 240px;
    line-height: 40px;
    color: #fff;
    font-weight: bold;
    border-radius: 6px;
    background-color: #07c;
    box-shadow: 0 2px 10px #999;
    cursor: pointer;
    transition: all 0.2s ease-out;
  }
  .hover-1:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px #999;
  }
</style>

CSS ホバーアニメーション ② テキストをズームさせる

こちらもシンプルなアニメーションで、使いやすいスタイルです。

<button class="hover-2">ボタンサンプル２</button>
<style>
  .hover-2 {
    display: block;
    width: 240px;
    line-height: 40px;
    color: #fff;
    font-weight: bold;
    font-size: 0.75rem;
    border-radius: 6px;
    background-color: #07c;
    box-shadow: 0 2px 10px #999;
    cursor: pointer;
    transition: all 0.2s ease-out;
  }
  .hover-2:hover {
    font-size: 1rem;
  }
</style>

CSS ホバーアニメーション ③ ボタンを押したように

ガッチサイトでも SNS シェアボタンに採用しているスタイルです。

<button class="hover-3">ボタンサンプル３</button>
<style>
  .hover-3 {
    display: block;
    width: 240px;
    line-height: 40px;
    color: #fff;
    font-weight: bold;
    border-radius: 6px;
    background-color: #07c;
    box-shadow: 0 4px 0 #07c;
    cursor: pointer;
    transition: all 0.2s ease-out;
  }
  .hover-3:hover {
    box-shadow: none;
  }
</style>

CSS ホバーアニメーション ④ 色を反転させる

シンプルなフラットデザインを基調としてサイトでよく見かけるアニメーションです。

<button class="hover-4">ボタンサンプル４</button>
<style>
  .hover-4 {
    display: block;
    width: 240px;
    line-height: 40px;
    color: #fff;
    font-weight: bold;
    border-radius: 6px;
    background-color: #07c;
    box-shadow: 0 4px 0 #07c;
    cursor: pointer;
    transition: all 0.2s ease-out;
  }
  .hover-4:hover {
    box-shadow: none;
  }
</style>

CSS ホバーアニメーション ⑤ サムネイルをズームさせる

一覧や WEB サイトトップでよく見かけるサムネイル画像がズームするサンプルです。

サンプルでは img タグを transform しています。

すでにあるサイトにも対応可能で、2、3 行 css を追加するだけでアニメーションのあるオシャレサイトへ変身させることができます。

<div class="area-5">
  <img class="hover-5" src="[画像のURL]" />
</div>
<style>
  .hover-5 {
    overflow: hidden;
    width: 256px;
    height: 256px;
  }
  .hover-5 {
    transition: all 0.2s ease-out;
    cursor: pointer;
  }
  .hover-7:hover {
    transform: scale(1.1);
  }
</style>

画像の外に幅・高さを指定した div タグを追加し、overflow:hidden; を追加する。
img タグの :hover に transform を追加する
img タグのスタイルに transition を追加してアニメーション完成です。

CSS ホバーアニメーション ⑥ サムネイルをぼかす

背景画像をぼかすことで、よりリッチに見せられるテクニックサンプルです。

CSS の filter:blur(); を使うだけと簡単に扱えるのもメリットです。

写真を多用するサイトに向いているかもしれないですね。

:hover の擬似要素をエリア部分で設定し、その子要素をアニメーション設定することで実現しています。

<div class="area-6">
  <div class="hover-6"></div>
  <span class="font-6">MORE</span>
</div>
<style>
  .area-6 {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 256px;
  }
  .hover-6 {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('[画像のURL]');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 0.2s ease-out;
    cursor: pointer;
  }
  .font-6 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 256px;
    line-height: 256px;
    text-align: center;
    font-size: 8rem;
    font-weight: bold;
    letter-spacing: 12px;
    color: #fff;
    opacity: 0;
    cursor: pointer;
    transition: all 0.3s ease-out;
  }
  .area-6:hover .font-6 {
    opacity: 0.6;
  }
  .area-6:hover .hover-6 {
    transform: scale(1.1);
    filter: blur(2px);
  }
</style>

CSS ホバーアニメーション ⑦ サムネイルとテキストのカード形式

実際のサイトでよく使う「サムネイルとテキストのカード形式」でのサンプルです。

HTML の a タグを使ったリンクを意識した作りにしています。

ぜひ使ってみてください。

サムネイルとテキストサンプル

<div class="area-7">
  <a class="hover-7" href="#">
    <div class="hover-7-thumb"></div>
    <p class="hover-7-text">サムネイルとテキストサンプル</p>
  </a>
</div>
<style>
  .hover-7 {
    overflow: hidden;
    display: block;
    width: 256px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  }
  .hover-7-thumb {
    width: 100%;
    height: 186px;
    background-image: url('[画像のURL]');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    transition: all 0.2s ease-out;
  }
  .hover-7:hover .hover-7-thumb {
    background-size: 110%;
  }
  .hover-7-text {
    padding: 5px;
    color: #444;
  }
</style>