Animate.css v4では破壊的な変更がいくつか導入されました。v3.x以下からアップデートする前に移行ガイドを参照してください。
Animate.cssは、Webプロジェクトで使用するための、すぐに使えるクロスブラウザのアニメーションライブラリです。強調、ホームページ、スライダー、注意を引くヒントなどに最適です。
GitHubで編集
インストールと使用方法
インストール
npmでインストール
$ npm install animate.css --save
またはYarnでインストール（これはWebpack、Parcelなどの適切なツールでのみ機能します。コードのパックやバンドルにツールを使用していない場合は、以下のCDNメソッドを使用できます）
$ yarn add animate.css
ファイルにインポートします
import 'animate.css';
または、CDNを使用してWebページに直接追加します
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
基本的な使用方法
Animate.cssをインストールしたら、要素にクラスanimate__animatedとアニメーション名を追加します（animate__プレフィックスを忘れないでください！）
<h1 class="animate__animated animate__bounce">An animated element</h1>
以上です！これでCSSアニメーション要素ができました。素晴らしい！
アニメーションはインターフェイスのUXを向上させることができますが、ユーザーの邪魔になる可能性もあることに注意してください！Webを可能な限り最高の形で実現するために、ベストプラクティスと落とし穴のセクションをお読みください。
@keyframesの使用
ライブラリには、すぐに実行できるanimatedクラスのようなヘルパークラスがいくつか用意されていますが、提供されているアニメーションのkeyframesを直接使用することもできます。これにより、HTMLコードをリファクタリングすることなく、現在のプロジェクトでAnimate.cssを柔軟に使用できます。
例
.my-element {
display: inline-block;
margin: 0 0.5rem;
animation: bounce; /* referring directly to the animation's @keyframe declaration */
animation-duration: 2s; /* don't forget to set a duration! */
}
一部のアニメーションは、アニメーションのクラスに設定されたanimation-timingプロパティに依存していることに注意してください。これを変更したり、宣言しなかったりすると、予期しない結果になる可能性があります。
CSSカスタムプロパティ（CSS変数）
バージョン4以降、Animate.cssでは、アニメーションのduration、delay、iterationsを定義するためにカスタムプロパティ（CSS変数とも呼ばれます）を使用しています。これにより、Animate.cssは非常に柔軟でカスタマイズ可能になります。アニメーションのdurationを変更する必要がありますか？グローバルまたはローカルに新しい値を設定するだけです。
例
/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
--animate-duration: 2s;
}
/* This changes all the animations globally */
:root {
--animate-duration: 800ms;
--animate-delay: 0.9s;
}
カスタムプロパティを使用すると、アニメーションの時間制約付きプロパティをすべてその場で簡単に変更することもできます。つまり、javascriptの1行でスローモーションまたはタイムラプス効果を実現できます
// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');
// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');
一部の古いブラウザはカスタムプロパティをサポートしていませんが、Animate.cssは適切なフォールバックを提供し、CSSアニメーションをサポートするすべてのブラウザのサポートを拡大しています。
GitHubで編集
ユーティリティクラス
Animate.cssには、使用を簡素化するためのいくつかのユーティリティクラスが付属しています。
遅延クラス
以下のように、要素のclass属性に直接遅延を追加できます
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
Animate.cssは、次の遅延を提供します
| クラス名 |
デフォルトの遅延時間 |
animate__delay-2s |
2秒 |
animate__delay-3s |
3秒 |
animate__delay-4s |
4秒 |
animate__delay-5s |
5秒 |
提供されている遅延は1秒から5秒です。--animate-delayプロパティをより長いまたは短いdurationに設定することでカスタマイズできます
/* All delay classes will take 2x longer to start */
:root {
--animate-delay: 2s;
}
/* All delay classes will take half the time to start */
:root {
--animate-delay: 0.5s;
}
Slow、slower、fast、Fasterクラス
以下のように、これらのクラスを追加することで、アニメーションの速度を制御できます
<div class="animate__animated animate__bounce animate__faster">Example</div>
| クラス名 |
デフォルトの速度時間 |
animate__slow |
2秒 |
animate__slower |
3秒 |
animate__fast |
800ミリ秒 |
animate__faster |
500ミリ秒 |
animate__animatedクラスのデフォルトの速度は1秒です。グローバルまたはローカルに--animate-durationプロパティを使用して、アニメーションのdurationをカスタマイズすることもできます。これは、アニメーションとユーティリティクラスの両方に影響します。例
/* All animations will take twice as long to finish */
:root {
--animate-duration: 2s;
}
/* Only this element will take half the time to finish */
.my-element {
--animate-duration: 0.5s;
}
一部のアニメーションは1秒未満のdurationを持っていることに注意してください。CSSのcalc()関数を使用しているため、--animation-durationプロパティを使用してdurationを設定すると、これらの比率が尊重されます。したがって、グローバルdurationを変更すると、すべてのアニメーションがその変更に応答します！
繰り返しクラス
以下のように、これらのクラスを追加することで、アニメーションの反復回数を制御できます
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>
| クラス名 |
デフォルトの反復回数 |
animate__repeat-1 |
1 |
animate__repeat-2 |
2 |
animate__repeat-3 |
3 |
animate__infinite |
無限 |
遅延クラスおよび速度クラスと同様に、animate__repeatクラスは--animate-repeatプロパティに基づいており、デフォルトの反復回数は1です。--animate-repeatプロパティをより長いまたは短い値に設定することで、これらをカスタマイズできます
/* The element will repeat the animation 2x
It's better to set this property locally and not globally or
you might end up with a messy situation */
.my-element {
--animate-repeat: 2;
}
animate__infiniteはカスタムプロパティを使用せず、--animate-repeatへの変更は影響しないことに注意してください。繰り返しアニメーションを最大限に活用するには、ベストプラクティスのセクションを読むことを忘れないでください。
GitHubで編集
ベストプラクティス
アニメーションはインターフェイスのUXを大幅に向上させることができますが、やりすぎてWeb上のユーザーエクスペリエンスを損なわないように、いくつかのガイドラインに従うことが重要です。次のルールに従うことで、良いスタートを切ることができます。
意味のあるアニメーション
要素をアニメーション化するためだけにアニメーション化することは避ける必要があります。アニメーションは意図を明確にする必要があることに注意してください。注目を集めるアニメーション（バウンス、フラッシュ、パルスなど）は、インターフェイスの特別なものにユーザーの注意を引くために使用する必要があり、単に「派手さ」をもたらす方法として使用するだけではありません。
出現と退場のアニメーションは、インターフェイスで何が起こっているかを方向付けるために使用し、新しい状態に移行していることを明確に知らせる必要があります。
インターフェイスに遊び心を追加することを避けるべきだということではありません。アニメーションがユーザーの邪魔にならず、ページのアニメーションの過剰な使用によってパフォーマンスが影響を受けないようにしてください。
大きな要素をアニメーション化しない
ユーザーに大きな価値をもたらすことはなく、おそらく混乱を引き起こすだけなので、避けてください。さらに、アニメーションがぎくしゃくし、最終的に悪いUXになる可能性が高くなります。
ルート要素をアニメーション化しない
<html/>または<body/>タグをアニメーション化することは可能ですが、避ける必要があります。これにより、奇妙なブラウザバグが発生する可能性があるという報告がいくつかありました。それに加えて、ページ全体をバウンスさせても、UXに良い価値を提供することはほとんどありません。実際にこの種の効果が必要な場合は、ページを要素でラップしてアニメーション化します。例
<body>
<main class="animate__animated animate__fadeInLeft">
<!-- Your code -->
</main>
</body>
無限アニメーションは避けるべきです
Animate.cssには、無限のものを含む繰り返しアニメーション用のユーティリティクラスが用意されていますが、無限のアニメーションは避けるべきです。ユーザーの注意をそらすだけで、かなりのユーザーを悩ませる可能性があります。そのため、賢く使用してください！
要素の初期状態と最終状態に注意する
Animate.cssのアニメーションにはすべて、animation-fill-modeと呼ばれるCSSプロパティが含まれています。これは、アニメーションの前後の要素の状態を制御します。詳細については、こちらをお読みください。Animate.cssはデフォルトでanimation-fill-mode: bothになっていますが、必要に応じて変更できます。
prefers-reduced-motionメディアクエリを無効にしない
バージョン3.7.0以降、Animate.cssは、サポートブラウザ（ほとんどの現在のブラウザがサポートしています）のOSシステムのプリファレンスに基づいてアニメーションを無効にするprefers-reduced-motionメディアクエリをサポートしています。これは非常に重要なアクセシビリティ機能であり、絶対に無効にしないでください！これは、前庭障害や発作障害のある人々を支援するためにブラウザに組み込まれています。詳細については、こちらをお読みください。Webでアニメーションが機能する必要がある場合は、ユーザーに警告しますが、機能を無効にしないでください。これはCSSのみで簡単に行うことができます。簡単な例を次に示します
Elton Mesquita (@eltonmesquita) によるCodePenのPrefers-reduce-motion media queryをご覧ください（CodePen）。
落とし穴
インライン要素をアニメーション化することはできません
一部のブラウザではインライン要素をアニメーション化できますが、これはCSSアニメーション仕様に反しており、一部のブラウザでは破損したり、最終的に機能しなくなったりします。常にブロックレベル要素またはインラインブロックレベル要素をアニメーション化します（グリッドおよびフレックスコンテナと子はブロックレベル要素でもあります）。インラインレベル要素をアニメーション化するときは、要素をdisplay: inline-blockに設定できます。
オーバーフロー
Animate.css のアニメーションの多くは、要素を画面上で移動させるため、Webサイト上にスクロールバーが表示される場合があります。これは、overflow: hidden プロパティを使用することで管理できます。いつどこでこれを使用するかという決まった方法はありませんが、基本的な考え方としては、アニメーション化された要素を保持する親要素で使用することです。いつどのように使用するかはあなた次第です。理解を深めるために、こちらのガイドが役立つでしょう。
繰り返し間の間隔
残念ながら、これは現時点では純粋なCSSでは実現できません。この結果を得るには、JavaScriptを使用する必要があります。
GitHubで編集
JavaScriptでの使用
Animate.cssとJavaScriptを組み合わせると、さまざまなことが可能です。簡単な例を挙げます。
const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft');
アニメーションが終了したタイミングを検出できます。
const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft');
element.addEventListener('animationend', () => {
// do something
});
または、アニメーションのdurationを変更できます。
const element = document.querySelector('.my-element');
element.style.setProperty('--animate-duration', '0.5s');
簡単な関数を使って、アニメーションクラスを追加し、自動的に削除することもできます。
const animateCSS = (element, animation, prefix = 'animate__') =>
// We create a Promise and return it
new Promise((resolve, reject) => {
const animationName = `${prefix}${animation}`;
const node = document.querySelector(element);
node.classList.add(`${prefix}animated`, animationName);
// When the animation ends, we clean the classes and resolve the Promise
function handleAnimationEnd(event) {
event.stopPropagation();
node.classList.remove(`${prefix}animated`, animationName);
resolve('Animation ended');
}
node.addEventListener('animationend', handleAnimationEnd, {once: true});
});
このように使用します。
animateCSS('.my-element', 'bounce');
// or
animateCSS('.my-element', 'bounce').then((message) => {
// Do something after the animation
});
上記の関数を理解するのが難しい場合は、const、classList、アロー関数、およびPromise を参照してください。
GitHubで編集
v3.x 以前からの移行
Animate.css v4 では、いくつかの改善、改良されたアニメーション、および新しいアニメーションが導入され、アップグレードする価値があります。ただし、破壊的な変更も含まれています。すべての Animate.css クラスに animate__ をデフォルトとするプレフィックスを追加したため、直接的な移行は不可能です。
しかし、ご安心ください！デフォルトのビルドである animate.min.css には animate__ プレフィックスが含まれていますが、以前のバージョン（3.x 以前）のようにプレフィックスを含まない animate.compat.css ファイルも提供しています。
バンドラーを使用している場合は、インポートを更新してください。
変更前：
import 'animate.min.css';
変更後：
import 'animate.compat.css';
プロジェクトの設定によっては、多少異なる場合があります。
CDN を使用している場合は、HTML 内のリンクを更新してください。
変更前：
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"
/>
</head>
変更後：
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css"
/>
</head>
新しいプロジェクトの場合は、デフォルトのプレフィックス付きバージョンを使用することを強くお勧めします。これにより、プロジェクトとクラスが競合する可能性が低くなります。また、将来のバージョンでは、animate.compat.css ファイルを廃止する可能性があります。
GitHubで編集
カスタムビルド
npmモジュールにはビルドツールが含まれていないため、node_modulesフォルダーからカスタムビルドを作成することはできません。
Animate.cssはnpm、postcss + postcss-preset-envによって提供されており、将来のCSSと適切なフォールバックを使用して、非常に簡単にカスタムビルドを作成できます。
まず、Nodeと他のすべての依存関係が必要です。
$ git clone https://github.com/animate-css/animate.css.git
$ cd animate.css
$ npm install
次に、npm start を実行してカスタムビルドをコンパイルします。3つのファイルが生成されます。
animate.css: 生のビルドで、読みやすく、最適化されていません。animate.min.css: 本番環境に対応したミニファイされたビルドです。animate.compat.css: 本番環境に対応したミニファイされたビルドで、クラスプレフィックスがありません。これは、移行のための簡単な手段としてのみ使用してください。
たとえば、「attention seekers」アニメーションの一部のみを使用する場合は、./source/animate.css ファイルを編集し、すべての @import と使用したいものを削除します。
@import 'attention_seekers/bounce.css';
@import 'attention_seekers/flash.css';
@import 'attention_seekers/pulse.css';
@import 'attention_seekers/rubberBand.css';
@import 'attention_seekers/shake.css';
@import 'attention_seekers/headShake.css';
@import 'attention_seekers/swing.css';
@import 'attention_seekers/tada.css';
@import 'attention_seekers/wobble.css';
@import 'attention_seekers/jello.css';
@import 'attention_seekers/heartBeat.css';
次に、npm start を実行するだけで、高度に最適化されたビルドがプロジェクトのルートに生成されます。
デフォルトプレフィックスの変更
カスタムビルドで Animate のプレフィックスを変更するのは非常に簡単です。package.json ファイルの animateConfig の prefix プロパティを変更し、npm start でライブラリをリビルドします。
/* on Animate.css package.json */
"animateConfig": {
"prefix": "myCustomPrefix__"
},
変更前：
$ npm start
簡単でしょう！
GitHubで編集
アクセシビリティ
Animate.cssは、prefers-reduced-motion メディアクエリをサポートしているため、モーションに敏感なユーザーはアニメーションをオフにすることができます。サポートされているプラットフォーム（現在、主要なブラウザとOS、モバイルを含む）では、ユーザーはオペレーティングシステムの環境設定で「モーションを減らす」を選択できます。これにより、追加の作業なしでCSSトランジションが無効になります。
GitHubで編集
