Jump to the content

ちょっと動きをつけたいときのCSSアニメーションライブラリ5選

CSS

    ちょっと動きをつけたいときのCSSアニメーションライブラリ5選

    どうも、イソップです。

    最近ボタンのアニメーションを、自分でイチから作る機会が減ってきています。 なぜなら、CSSベースの使いやすいアニメーションライブラリが増えてきているからです。

    アニメーション作成は地味に時間がかかるものですよね。
    複雑じゃないものだったら、出来上がったものを使ったほうが断然効率的です。

    今日は数ある中でも、主要なものを厳選して紹介したいと思います。

    Animate.css

    Animate.css

    Animate.cssは、クラスをつけるだけで使える人気のライブラリ。 何度も使っていますが、メリハリのあるアニメーションがカンタンに適用できるので、重宝しています。
    やろうと思えば、ダウンロードしたコードをいじってカスタマイズも出来ますよ。

    使い方ですが、CSSファイルを読み込んで、

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

    要素のclassに指定してあげるだけです。

    <h1 class="animated infinite bounce">Example</h1>
    

    個人的には bounce とか rubberBand なんかが使いやすいです。

    実際の動きはデモで試してみてくださいね。

    Hover.css

    Hover.css

    Hover.cssは、ホバーエフェクトに特化したライブラリです。

    2Dアニメーションも然ることながら、背景アニメーションやボーダーアニメーションも使いやすい動きが満載です。

    Font Awesomeのアイコンをアニメーションも出来ますよ、ほんと素敵すぎ。

    使い方は、ダウンロードしたファイルをそのまま使う方法と、 必要なエフェクトだけをコピペして使う方法があります。

    ちなみにこれは、ダウンロードしたファイルを読み込む方法。

    <head>
        <link href="css/hover-min.css" rel="stylesheet">
    </head>
    
    <a href="#" class="hvr-grow">Add to Basket</a>
    

    ぼく個人としては、必要なものだけをコピペして使いたいですね。

    Magic Animations

    magic animations

    Magic Animationsは、Animate.cssにインスピレーションを受けて作られたライブラリです。
    ダイナミックな動きが多いのが特徴ですね。

    vanishin とか Bomb なんかは珍しい動きだから、良いアクセントになりそう。

    使い方は、CSSファイルを読み込んで、

    <link rel="stylesheet" href="yourpath/magic.css">
    

    JSでクラスを追加してあげます。この例はjQueryを使用しています。

    $('.yourdiv').hover(function () {
        $(this).addClass('magictime puffIn');
    });
    

    Imagehover.css

    Imagehover.css

    Imagehover.cssは、サムネイル画像のアニメーションに特化したライブラリです。

    ぼくはサムネイルのエフェクト実装、毎回どうしようかなぁって迷います。 これがあれば、迷っている時間がもったいないですね。

    使い方は、CSSファイルを読み込んで、

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

    figureタグfigcaptionタグでマークアップします。

    <figure class="imghvr-fade">
      <img src="#">
      <figcaption>
        // Hover Content
      </figcaption>
    </figure>
    

    ドキュメントもしっかり用意されているので、安心です。

    40個のエフェクトが用意されていますが、有料で216個のエフェクトがセットになったデラックス版が手に入ります。 動画で動きが紹介されているので、見てみると参考になると思いますよ。

    Bounce.js

    Bounce.js

    最後はJSライブラリのBounce.jsです。
    エフェクトを追加して合成できるのが特徴です。
    JSのライブラリなんですが、CSSアニメーションへの変換ができます。

    このライブラリは個人的に使ったことがあって、自分でJavaScriptのコードを書くよりも、 公式サイトのエディターで動きを確認しながら作るほうが、サクサク作れてやりやすかったです。

    公式サイト左上の「ADD COMPONENT」ボタンからアニメーションを追加できます。

    ここで作成したエフェクトのCSSへの変換方法ですが、公式サイト中央部分に「EXPORT CSS」というリンクがあります。

    Bounce.js

    このリンクをクリックすると、作成したアニメーションがCSSコードで表示されます。

    Bounce.js

    これを自分のCSSにコピペして使いましょう。

    どれもこれも使いやすいんです

    5つのライブラリを紹介しましたが、いかがでしたか?
    今回は画像とコードでの説明でしたが、実際に試してみることをオススメします!

    くれぐれもアニメーションは適材適所を心がけてください!

    あと紹介して気づきましたが、コードを書かなくてもアニメーションを動かせる時代になったのだなぁ、としみじみと感じています。(遠い目)

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×