とあるWebデザイナーの技術ノート

【V4対応】Animate.cssの簡単な使い方

animatecss
⚠この記事が公開されたのは 2020年7月3日で、内容が古く、間違っている可能性があります。

設定方法

・CDNを利用する場合

head内に下記のlinkタグをコピペしてください。

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

※URLは変更になる可能性があります。
公式サイトの”Installation and usage(https://animate.style/#usage)”の項目でURLを確認しlinkしてください。

・DLして利用する場合

github(https://github.com/animate-css/animate.css)にアクセスし、
Cloneボタンのプルダウンにある「Download ZIP」からzipファイルをダウンロードしてください。

Githubのダウンロードページ

ダウンロードしたzipファイルを展開し、animate.cssまたはanimate.min.cssをhead内でlinkしてください。

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

基本的な使い方

アニメーションさせたい属性のクラスにanimate__animatedと任意のアニメーションのクラス名を付与してください。

<h1 class="animate__animated animate__bounce">アニメーションさせる要素</h1>

※V3以前はanimate__xxxxの記述の”animate__”の部分を削除してxxxxに置き換えてください。

アニメーションのクラス名は公式サイト(https://animate.style/)の右サイドバーから探せます。
animate.cssのトップページ

・任意のアニメーション名をクリックすると表題のAnimate.cssの文字でのデモンストレーションが確認できます。

・気に入ったら更に右側にあるコピーアイコンをクリックしてソースのクラス名に貼り付けるだけです。

なお、インライン要素は動作しないのでCSSでインラインブロックやブロック要素に変更する必要があります。動作しない場合は確認してみてください。

更にオプションを追加することでアニメーションの細かい動きが調整できます。

よく使うオプションのみ紹介します。

(オプション)アニメーションを早くしたり遅くしたりする

クラス名に以下のクラスを追加します。

・animate__slow: 2秒のアニメーション
・animate__slower: 3秒のアニメーション
・animate__fast: 800ミリ秒のアニメーション
・animate__faster: 500ミリ秒のアニメーション

<div class="animate__animated animate__bounce animate__faster">500ミリ秒のアニメーション要素</div>

(オプション)一定回数のループ

アニメーションの一定回数のループ(繰り返し)は以下のクラスを追加します。

・animate__repeat-1: 1回ループ
・animate__repeat-2: 2回ループ
・animate__repeat-3: 3回ループ

<div class="animate__animated animate__bounce animate__repeat-2">アニメーションが2回ループする要素</div>

(オプション)遅延動作

1秒～5秒の範囲でアニメーションが開始する時間を調整できます。

・animate__delay-2s: 2秒の遅延
・animate__delay-3s: 3秒の遅延
・animate__delay-4s: 4秒の遅延
・animate__delay-5s: 5秒の遅延

<div class="animate__animated animate__bounce animate__delay-2s">アニメーションを2秒遅延させる要素</div>

(オプション)無限ループ ※非推奨

以前はよく使用していたのですが、公式サイトにて「無限ループを使用した場合、コンテンツに集中できずユーザビリティが損なわれるのでよく考えて使用してください」という旨の注意書きがありました。無限ループは非推奨となったようです。いずれ使用できなくなるかもしれませんが、現時点でanimate__infiniteを付与することで動作したので一応紹介しておきます。

<div class="animate__animated animate__bounce animate__faster　animate__infinite">Example</div>

CSS@keyflamesの利用

HTMLのクラスの編集ができない場合や細かい調整をするためにCSSのkeyflamesを利用することもできます。

.my-element {  
 display: inline-block;  
 margin: 0 0.5rem;  

 animation: bounce; /* 任意のアニメーション名の記述 */  
 animation-duration: 2s; /* アニメーション間隔を必ず併記してください */  
}

最後に

公式サイトにUXに関する注意書きがありました。陥りがちな問題なので気になった部分をわかりやすく意訳・省略して記述しておきます。

要素のアニメーションは意図を明確してください。バウンス、フラッシュ、パルスなど派手なアニメーションは特別なものにユーザーの注意を向けるために使用してください。

アニメーションがユーザー操作の邪魔をして、不快感を与えたり、ページの目的に影響を与えないようにしてください。

大きな要素をアニメーション化しない

ユーザーが混乱するだけなので避けてください。最終的に悪いUXに至る可能性があります。

ルート要素をアニメーション化しない

バグを引き起こす報告があったためまたはタグのアニメーション化は避けてください。例えばページ全体をバウンスさせても、UXに良い効果は生まれません。どうしてもこのような動作を行いたい場合はルート要素の中要素でページをラップしアニメーションさせます。