コーディング

一から書く必要なし!CSSのアニメーションを実装するライブラリ5選

CSSのみで実装できるアニメーションライブラリを5つご紹介します。

最近はJavascriptやjQueryを使わずにCSSでアニメーションを実装することが多くなりました。
今回ご紹介するライブラリは、いずれもCSSファイルを読み込んで、クラスを付与するだけの簡単な手順で実装できます。

スポンサーリンク

animation library

http://animation.kaustubhmenon.com/

ロボットがアニメーションのプレビューをしてくれます。
ロボットがかわいくて、アニメーションを選択している間も退屈しません。

大きく分けると8パターンのアニメーションが用意されています。
それぞれのアニメーションに、さらに細かく変化を加えたものがそれぞれ10種類程度ずつあります。

  • fade
  • bounce
  • rotate
  • slide
  • flip
  • zoomin
  • zoomout
  • attention

ダウンロード

まずはサイトにアクセスします。

画面上部の中央あたりにある、ハンバーガーアイコンをクリックします。

「view on github」または「direct download」をクリックし、ファイルをダウンロードします。
「アニメーション名.css」というファイルがパターン別に用意されています。

ファイルの読み込み

<link rel="stylesheet" href="animation-library/css/attention.css">

実装したいアニメーションのCSSまたはSCSSファイルをHTMLで読み込みます。
例えば「attention」のアニメーションを実装したい場合、「attention.css」を読み込むといった具合です。

使い方

「attention > Bounce」のアニメーションを実装する場合。
「attention.css」のファイル内で、「Bounce」と検索します。

.u--bounce

というクラスが記述されているので、クラス名をクリップボードにコピーします。
コピーしたクラス名を、実装したい要素に付与すればアニメーションが実装できます。

Animation Library - SCSS / CSS3
Pure CSS Animation Library. Made with love at Later.com
スポンサーリンク

Animista

http://animista.net/

とにかく膨大な種類のアニメーションが用意されています。
そして実装もシンプルでとても簡単!ファイルのダウンロードも必要ありません。
個人的に一番おすすめのライブラリです。

使い方

まずはサイトにアクセスし、「TRY ME!」をクリックします。

画面上部にある黒い丸が、アニメーションの大分類です。
その下にある「slide-bck-center」等は、さらに細かいパターンです。
選択すると、画面中央にあるオブジェクトでプレビューできます。

アニメーションを選択したら、さらに細かくカスタマイズすることもできます。
アニメーションする時間や回数など、自分好みに変更できます。

実装したいアニメーションが決まったら、画面右側にある赤枠で示したアイコンをクリックします。

するとコードが生成され、表示されます。
どちらもコピーして、CSSファイルにペーストします。

あとは、HTML側で実装したい要素にクラスを付与すれば実装完了です。

Animista
Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.
スポンサーリンク

VOV.CSS

https://vaibhav111tandon.github.io/vov.css/

使い方はシンプルで、オーソドックスなアニメーションが揃っています。
CDNも用意されているので、より手軽に実装が可能です。

ダウンロード

まずはサイトにアクセスします。

画面中央あたりにある、「View On Github」よりダウンロードできます。

ファイルの読み込み

<link rel="stylesheet" href="css/vov.css">

ダウンロードしたファイルをHTMLに読み込みます。
パスはサイトにあわせて変更してください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vaibhav111tandon/vov.css@latest/vov.css">

CDNから読み込む場合はこちら。
そのままコピペで問題ありません。

使い方

セレクトボックスのテキストがそのままクラス名になっています。

<div class="vov fade-in-down"></div>

「fade-in-down」を実装したい場合は、要素に「vov」と「fade-in-down」2つのクラスを付与すると実装できます。
「vov」クラスは必須なので、必ず指定するようにしましょう。

オプションは以下に詳しく載っています。
https://github.com/vaibhav111tandon/vov.css

VOV.CSS
スポンサーリンク

Animate.css

https://daneden.github.io/animate.css/

有名なライブラリですね。
セレクトボックスを開くと、アニメーションのパターンがずらっと並んでいます。

いずれかを選択すると、「Animate.css」が動きプレビューできます。

ダウンロード

まずはサイトにアクセスします。

セレクトボックスの下にある、「Download Animate.css」もしくは「View on GitHub」よりファイルをダウンロードできます。

ファイルの読み込み

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

ダウンロードしたファイルをHTMLに読み込みます。
パスはサイトにあわせて変更してください。

使い方

セレクトボックスのテキストがそのままクラス名になっています。

<div class="animated bounce"></div>

「bounce」を実装したい場合は、要素に「animated」と「bounce」2つのクラスを付与します。
「animated」クラスは必須なので、必ず指定するようにしましょう。

オプションは以下に詳しく載っています。
https://github.com/daneden/animate.css

Redirecting to Animate.css
スポンサーリンク

OBNOXIOUS.CSS

http://tholman.com/obnoxious/

とにかくダイナミックなアニメーションです。
使う使わないは置いておいて、まずはお試しあれ。

ダウンロード

下部にある「Source / How to Use」よりダウンロードできます。

ファイルの読み込み

<link rel="stylesheet" href="css/obnoxious.css">

ダウンロードしたファイルをHTMLに読み込みます。
パスはサイトにあわせて変更してください。

使い方

「Shake It」のアニメーションを実装したい場合、「obnoxious.css」ファイル内で「shake」と検索すれば、CSSが記述されています。

<div class="animated shakeit"></div>

アニメーションを実装したい要素に「animated」と「shakeit」2つのクラスを付与します。
「animated」クラスは必須なので、必ず指定するようにしましょう。

オプションは以下に詳しく載っています。
https://github.com/tholman/obnoxious.css

Obnoxious.css
Animations for the strong of heart, and weak of mind.
スポンサーリンク

まとめ

こういったアニメーションライブラリはみているだけでも楽しく、インスピレーションが刺激されますね。

近年のWebサイトでは、アニメーションが実装されているのは当たり前になってきています。
このようなライブラリを活用すれば複雑なアニメーションも簡単に実装できます。