【Animate.css】簡単な使い方とカスタマイズ方法

2019年6月12日Animate.css,CSSライブラリ,CSS,CSSアニメーション

手軽にCSSアニメーションが実装可能なクロスブラウザなCSSライブラリ「Animate.css」

CSSアニメーションは記述を理解していてもスムーズな動きを作るのは結構大変なので、こういったライブラリは利用する手もありですね

ひとつのアニメーションを実装するだけの為にライブラリを読み込むのは、、と考えてしまいますがファイルサイズも小さいですしSDNがあるので、追加CSSを自前で記述するより軽量化できるかも知れません

https://naruhodo.repop.jp/animate-css-2/

「Animate.css」の読み込み(SDN)

SDNがあるのでそちらを読み込みます

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" type="text/css" />

または

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.min.css/3.5.2/animate.css" type="text/css" />

「Animate.css」の簡単な使い方と説明

「Animate.css」はCSSライブラリとなっていて、要は「簡単なアニメーション挙動を各class名で定義してありますよ」という事ですね

使い方はアニメーション要素に「animated」というclassと各アニメーションのclass名を付ける事で実装できます

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

「animated」classが必要なので、他で使っているclassとの衝突はなくなるので良いですね

「animated」classにCSSを追加する事で全体を、各アニメーションclass名にCSSを追加して個別にアニメーション挙動を編集する事も可能そうです

アニメーションclass名を複数記述しても複数のアニメーションclassは適用されません

<div class="animated bounce shake">BOUNCE & SHAKE</div>

複数のアニメーションを同時に適用させる場合は、アニメーションさせたいアニメーションclass名と同一名でアニメーション名が用意されているのでCSSでanimation-nameを追加します

また繰り返し再生用classとして「infinite」が用意されています

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

class「infinite」を付与した表示結果

BOUNCE

特別に用意されているのは「infinite」だけなのでそれ以外は自前での実装になりますね

「Animate.css」の簡単なカスタマイズ

「infinite」はclassで実装できますので、他の部分でカスタマイズしたい場合は通常のCSSで追記していきます

animationプロパティ関連であれば（数値はデフォルトのもの） 全てのアニメーションに適用

.animated{
animation-delay:1s;
animation-duration:0s;
animation-timing-function:ease;
}

個別のアニメーションに適用

.animated .bounce{
animation-delay:1s;
animation-duration:0s;
animation-timing-function:ease;
}

となります また、新しくclassを作って定義していくのも良いですね

.animated .delay3s{
animation-duration:3s;
}

2019年6月12日Animate.css,CSSライブラリ,CSS,CSSアニメーション

Posted by Yousuke.U