BETA

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

投稿日:2020-06-29
最終更新:2020-06-29

設定方法

・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ファイルをダウンロードしてください。

ダウンロードした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の文字でのデモンストレーションが確認できます。

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

なお、インライン要素は動作しないので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>  

[email protected]の利用

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

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

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

最後に

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

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

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

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

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

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

バグを引き起こす報告があったため

または
タグのアニメーション化は避けてください。例えばページ全体をバウンスさせても、UXに良い効果は生まれません。どうしてもこのような動作を行いたい場合はルート要素の中要素でページをラップしアニメーションさせます。
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

メモするだけじゃもったいない。わざわざ人に教えるのも忍びない。 そういうときに書いているブログです。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう