【5%還元】Amazonキャッシュレスキャンペーン

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

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

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

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

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

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

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

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

記事の内容はこちら

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

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

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

安村さん並みにアグレッシブにせめても「CSSのコードは1行だけ!」というシンプルさが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ホバーアニメーション7選[ボタン/サムネイル]

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

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">ボタンサンプル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">ボタンサンプル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">ボタンサンプル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>
  1. 画像の外に幅・高さを指定したdivタグを追加し、overflow:hidden; を追加する。
  2. imgタグの :hovertransform を追加する
  3. imgタグのスタイルに transition を追加してアニメーション完成です。

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

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

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

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

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

MORE

<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>

CSSホバーアニメーションのまとめ

CSSホバーアニメションのサンプルを、ボタン・サムネイル〜一覧で使えるカード形式まで7つ紹介してきました。

ちょっとCSSを追加するだけで 「簡単にアニメーションが実装で、リッチなサイトにできるんだ!」 ということが分かってもらえたら、とても嬉しいです^^

どれもコピぺで使えるサンプルを厳選しましたので、自分のサイトや自社サイトなどに使ってみてください。

他にも何かこんなものを教えて欲しいなどありましたら、いつでもTwitterへ。

ではでは、ガッチ(@gatchsite)でした。

Amazon キャッシュレス5%還元

関連の記事を読んでみる