ちょっと動きをつけたいときの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つのライブラリを紹介しましたが、いかがでしたか?
今回は画像とコードでの説明でしたが、実際に試してみることをオススメします!

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

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

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.