はじめに
今回は、CSSアニメーションのライブラリ「Animate.css」をご紹介します。
フェードイン、フェードアウト、スライド、点滅など様々なアニメーション効果を、
シンプルなCSSクラスを指定するだけで簡単に適用できるライブラリです。
Animate.cssの基本的な使い方
インストール
CDNを使う場合は、以下のようにURLを指定します。
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
4.1.1は、2024年4月時点の最新バージョンです。
ダウンロードして使う場合は、GitHubからzipファイルを取得して展開し、
「animate.min.css」をサーバーにアップロードして利用してください。
npmやyarnでインストールする場合は、以下コマンドを実行します。
npm install animate.css --save
yarn add animate.css
CSSのclass指定
独自classに指定する方法と、animateクラスを直接指定する2つの方法があります。
独自classに指定する
<h1 class="hoge">An animated element</h1>
.hoge {
animation: bounce;
animation-duration: 0.8s;
}
独自クラスにプロパティで指定する場合は、animationでアニメーションの種類と
animation-durationでアニメーションの時間を指定します。
animateクラスを直接指定する
<h1 class="animate__animated animate__bounce">An animated element</h1>
animate__animatedとanimate__｛アニメーションの種類｝を指定します。
アニメーションの種類はAnimate.cssのサイトで確認し、コピーできます。
※次の章でもアニメーションの種類を確認できます！
animate__slowerなどスピードを指定するクラスを付加し、アニメーションの時間を変えられます。
slowerの他にslow、fast、fasterが用意されています。
また、デフォルトのアニメーション回数は1回ですが、
繰り返し実行したい場合はanimate__repeat-｛回数｝、
無制限に実行する場合はanimate__infiniteを指定します。
JavaScriptで実行タイミングを調整
繰り返し実行間隔の変更
デフォルトではアニメーション終了後、すぐにアニメーションが再開されてしまいます。
繰り返しの実行間隔を空けたい場合は、JavaScriptを利用します。
以下は繰り返し実行する要素にdata属性でdata-animation="bounce"と、
data-interval="3000"を指定し、3秒間隔で実行する例です。
classList.remove()とclassList.add()を使い、
指定間隔でアニメーションを再設定しています。
const element = document.querySelector('.animate__interval');
const animation = 'animate__' + element.dataset.animation;
element.classList.add(animation);
const interval = element.dataset.interval;
element.addEventListener('animationend', () => {
element.classList.remove(animation);
setTimeout(() => {
element.classList.add(animation);
}, interval);
});
要素が画面に入ったら実行
画面に表示された時に1回だけ実行させたい場合も、JavaScriptを利用します。
以下は画面をスクロールして要素が表示されたタイミングで、アニメーションが実行されます。
IntersectionObserverを使って要素の表示監視をおこない、
表示状態になったらアニメーションを設定しています。
const animation = 'animate__bounce';
const handleIntersection = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// entry.target.classList.remove(animation);
entry.target.classList.add(animation);
}
});
};
const observer = new IntersectionObserver(handleIntersection);
const animateClass = '.animate__animated';
const element = document.querySelector(animateClass);
observer.observe(element);
element.addEventListener('animationend', () => {
element.classList.remove(animation);
});
アニメーションの種類
ここまでbounceの例ばかりでしたが、他のアニメーションも全てサンプルでご紹介します！
demo1：Attention seekers（注目させる）
demo2：Back entrances（外から入る）
demo3：Back exits（外へ出る）
demo4：Bouncing entrances（入って跳ねる）
demo5：Bouncing exits（跳ねて出る）
demo6：Fading entrances（フェードイン）
demo7：Fading exits（フェードアウト）
demo8：Flippers（反転させる）
demo9：Lightspeed（斜体でスライド）
demo10：Rotating entrances（回転して入る）
demo11：Rotating exits（回転して出る）
demo12：Specials（特殊な動き）
demo13：Zooming entrances（ズームイン）
demo14：Zooming exits（ズームアウト）
demo15：Sliding entrances（スライドイン）
demo16：Sliding exits（スライドアウト）
おわりに
demo2〜7はデフォルトの動きが早かったため、CSSのカスタムプロパティ指定で、
アニメーションを遅く調整してみました。
:root {
--animate-duration: 3s;
}
アニメーションはユーザーの注目を引くのに効果的ですが、
動きが多いと目障りにもなるので、使い過ぎには注意しましょう🫣🫨
「ワークスタイルの未来を切り拓く」を理念に掲げ、リアルとデジタルの2つの働く場に向けた事業展開に留まらず、自社が率先して新しいワークスタイルに挑戦し、発信を行うことでワークスタイルの未来を切り拓いていきます。
Discussion