【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を使用してマウスオーバーでアニメーションを実行する方法のご紹介でした!

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。