【2021/9/18】登録不要の見積書作成ツール
「SPEEC」を公開しました!

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

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍