＃はじめに
今回は、Animate.cssという簡単にアニメーションを実装できるライブラリを紹介していきたいと思います。
使い方
事前準備
headタグに以下をコピペするだけで使用する準備は完了です。
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
npmでは以下のコマンドを実行します。
npm install animate.css
classに使いたいアニメーションのクラスを仕込む
例えば、以下の要素をずっと横揺れさせたいとします。
<h1>
An animated element
</h1>
そんなときは、公式サイトの右側のペインから、つけたいアニメーションを探します。(以下画像赤枠の部分)
今回は横揺れさせたいので、animate__shakeXを使用します。
要素をホバーすると出てくる、コピーボタンを押します。
それを、animate__animatedという文字列に続く形でクラスに入れます。
animate__animatedはAnimate.cssを使うよ、という宣言のようなものです。
<h1 class="animate__animated animate__shakeX">
An animated element
</h1>
すると...
See the Pen animate__shakeX by hikagami (@hikagami0210) on CodePen.
横揺れさせることができました！
ただ、このままだと一回でアニメーションが終わってしまうので、animate__infiniteというクラスを足します。
See the Pen Untitled by hikagami (@hikagami0210) on CodePen.
これで永久に横揺れさせ続けることができます。(酔い注意)
このように、Animate.cssを使えばめちゃくちゃ簡単にアニメーションをつけることができます！
ユーティリティクラス
animate__infiniteというクラスを使いましたが、このようにアニメーションを制御するクラス(ユーティリティクラス)は他にもありますのでそれを紹介していきたいと思います。
アニメーションを遅らせる
アニメーションを遅らせるクラスです。
5段階あります。
- animate__delay-2s
- animate__delay-3s
- animate__delay-4s
- animate__delay-5s
以下のようにすると、細かく調整することも可能です。
.class {
--animate-delay: 0.5s;
}
速度を変化させる
アニメーションの速さを変化させます。
デフォルトは1sです。
- animate__slow (2s)
- animate__slower (3s)
- animate__fast (800ms)
- animate__faster (500ms)
細かく調整することもできます。
.class {
--animate-duration: 0.5s;
}
繰り返す
アニメーションの繰り返しを制御します。
先ほど使用したanimate__infiniteもこの中にあります。
- animate__repeat-1
- animate__repeat-2
- animate__repeat-3
- animate__infinite (ずっと繰り返す)
細かく調整することもできます。
.class {
--animate-repeat: 2;
}
アニメーションを使用する上での注意
公式サイトには、ユーザー体験やアクセシビリティの観点からいくつかの注意がされています。
抜粋して、deeplで翻訳したものを載せておきます。（参考になったので...）
- 意味のあるアニメーション
要素をただアニメーションさせるのは避けるべきだ。アニメーションは意図を明確にするものであることを肝に銘じてください。アテンションシーカーのようなアニメーション（バウンス、フラッシュ、パルスなど）は、インターフェイスに「派手さ」をもたらすための手段としてだけでなく、インターフェイスの中の特別なものにユーザーの注意を向けさせるために使うべきです。
入口と出口のアニメーションは、インターフェイスで起こっていることを方向づけるために使われるべきで、新しい状態に移行していることを明確に知らせるものです。
インターフェイスに遊び心を加えることを避けるべきだということではありません。ただ、アニメーションがユーザーの邪魔にならないように、また、大げさなアニメーションの使用によってページのパフォーマンスに影響が出ないように注意しましょう。
prefers-reduced-motionメディアクエリを無効にしないでください。
Animate.cssはprefers-reduced-motionメディアクエリをサポートしています。このメディアクエリは、OSシステムがサポートするブラウザの優先順位に基づいてアニメーションを無効にします（現在のほとんどのブラウザがサポートしています）。これは重要なアクセシビリティ機能であり、決して無効にしてはいけません！これは、平衡感覚の障害や発作性の障害のある人を助けるためにブラウザに組み込まれています。詳しくはこちらをご覧ください。あなたのウェブが機能するためにアニメーションが必要な場合は、ユーザーに警告を出しましょう
さいごに
さいごまでお読みいただきありがとうございました！