animate.cssでホバーエフェクトを実装する

今回は CSS のライブラリ「animate.css」を使用して、ホバーエフェクトを実装する手順を紹介します。

WordPress で animate.css を使用する場合は、こちらのページを参考にしてください。

animate.cssでアニメーションをつける

このページでは、animate.css と ScrollTrigger.js を使用して、画面のスクロールに対応したアニメーションを実装する手順について紹介しています。

unitypull.com

2018.02.25

ホバーエフェクトの実装

ホバーエフェクトを付与した対象にカーソルが重なった時 animate.css のアニメーションが再生されるという流れになります。

1. animate.cssの読み込み

ダウンロードした animate.min.css (animate.cssの圧縮版) を読み込みます。
index.html と同じ階層に css という名前でフォルダを作成して、その中に animate.min.css を配置した場合は下のような記述となります。

<link rel="stylesheet" href="css/animate.min.css">

2. ホバーエフェクトを付与する対象を決める

index.html でホバーエフェクト付与する対象に class=”” を記述します。
今回はアニメーションごとにクラス名を設定します。
bounce (弾む) を animation_b、flash (点滅) を animation_f、swing (揺れる) を animation_s としました。

animate.css で使用できるアニメーションについては、こちらのページで確認できます。

animate.cssクラス一覧

このページでは animate.css のアニメーション一覧(2018年6月/76種類)を紹介しています。

unitypull.com

2018.06.24

<div class="animation_b"><img src="sample1.png"></div>
<p>bounce</p>
<div class="animation_f"><img src="sample2.png"></div>
<p>flash</p>
<div class="animation_s"><img src="sample3.png"></div>
<p>swing</p>

3. CSSにホバー時の動作を記述

styles.css にホバー時(カーソルが重なった時)の動作を記述します。

.animation_b:hover {
  animation: bounce 2s infinite;
}

上記コードの 2s の部分でアニメーションの時間を指定することができます。
サンプルの場合アニメーション１回当たりの時間は２秒となります。

bounce

.animation_f:hover {
  animation: flash 0.5s infinite;
}

infinite をつけるとカーソルが対象に重なっている間アニメーションが繰り返されます。

flash

.animation_s:hover {
  animation: swing 1s;
}

infinite が無い場合は、カーソルが対象に重なった時に１回だけアニメーションを実行します。

swing