CSSのみで実装できるアニメーションライブラリを5つご紹介します。
最近はJavascriptやjQueryを使わずにCSSでアニメーションを実装することが多くなりました。
今回ご紹介するライブラリは、いずれもCSSファイルを読み込んで、クラスを付与するだけの簡単な手順で実装できます。
animation library
ロボットがアニメーションのプレビューをしてくれます。
ロボットがかわいくて、アニメーションを選択している間も退屈しません。
大きく分けると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というクラスが記述されているので、クラス名をクリップボードにコピーします。
コピーしたクラス名を、実装したい要素に付与すればアニメーションが実装できます。
Animista
とにかく膨大な種類のアニメーションが用意されています。
そして実装もシンプルでとても簡単！ファイルのダウンロードも必要ありません。
個人的に一番おすすめのライブラリです。
使い方
まずはサイトにアクセスし、「TRY ME！」をクリックします。
画面上部にある黒い丸が、アニメーションの大分類です。
その下にある「slide-bck-center」等は、さらに細かいパターンです。
選択すると、画面中央にあるオブジェクトでプレビューできます。
アニメーションを選択したら、さらに細かくカスタマイズすることもできます。
アニメーションする時間や回数など、自分好みに変更できます。
実装したいアニメーションが決まったら、画面右側にある赤枠で示したアイコンをクリックします。
するとコードが生成され、表示されます。
どちらもコピーして、CSSファイルにペーストします。
あとは、HTML側で実装したい要素にクラスを付与すれば実装完了です。
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
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
OBNOXIOUS.CSS
とにかくダイナミックなアニメーションです。
使う使わないは置いておいて、まずはお試しあれ。
ダウンロード
下部にある「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
まとめ
こういったアニメーションライブラリはみているだけでも楽しく、インスピレーションが刺激されますね。
近年のWebサイトでは、アニメーションが実装されているのは当たり前になってきています。
このようなライブラリを活用すれば複雑なアニメーションも簡単に実装できます。