【Animate.css】マウスオーバーでアニメーションを実行する

こんにちは、Ryohei（@ityryohei）です！

本記事ではAnimate.cssを使用して、マウスオーバー時にアニメーションを実行する方法をご紹介しています。

「Animate.css」はclassを指定することで様々な種類のアニメーションを簡単に実装することができるCSSのライブラリファイルになります。

本記事ではマウスオーバー時に実行する方法を解説していますが、スクロールとクリックにつきましては下記の記事でご紹介していますので、併せて読んでいただければ幸いです。

では、解説していきます。

Animate.cssを読み込む

Animate.cssは、ダウンロードして使用する方法と、CDNで読み込む方法があります。

ダウンロードして読み込む

「Animate.css」は公式ページで配布されています。下記のリンク先でダウンロードしてCSSファイルを読み込みましょう。

Animate.css

CDNで読み込む

CDNで読み込む場合は、下記のタグを使用するファイルに貼り付けるだけです。

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

以上で準備は完了です。

CSSのみで実装する

まずはCSSのみで実装する方法から。

HTML

<div id="app">
    <div class="btn animated">Bounce</div>
</div>

CSS

.animated:hover {
    animation-name: bounce;
    animation-duration: 1s;
}

DEMO

See the Pen
Hover1｜Animate.css by ryohei (@intotheprogram)
on CodePen.

infinite追加例

.animated:hover {
    animation-name: bounce;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

jQueryを使用して実装する

続いてjQueryを使用して実装する方法です。「アニメーション名」の指定にはdata属性を使用しています。

HTML

<div id="app">
    <div class="btn animated" data-animate="bounce">Bounce</div>
</div>

jQuery

$(function(){
    var el = $('.animated');
    el.hover(function(){
        el.addClass($(this).data('animate'));
  
    }, function(){
        el.removeClass($(this).data('animate'));
    });
});

DEMO

See the Pen
Hover2｜Animate.css by ryohei (@intotheprogram)
on CodePen.

infinite追加例

<div id="app">
    <div class="btn animated" data-animate="bounce infinite">Bounce</div>
</div>

最後に

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

「Animate.css」をマウスオーバーで使用する場合、CSSだけで実装する方法からスクリプトで記述する方法まで、環境に合わせて選択することができます。

「Animate.css」はCSSで実現することができるアニメーションの幅が広がる素晴らしいライブラリなので、ぜひ今後とも活用していただければと思います。

以上、Animate.cssを使用してマウスオーバーでアニメーションを実行する方法のご紹介でした！