animate.cssの使い方【初心者にもわかりやすく解説】

※ご使用中のデバイスの設定によっては正しくアニメーションしない場合があります。設定を変更すればアニメーションが動く可能性が高いです。このページの後半で説明していますのでご確認ください。 windowsの視覚効果の設定を変更する方法このようなアニメーションを自分でCSSを使って作るには、animationプロパティやkeyframesの理解が必要です。しかし、animate.cssを使えばファイルを読み込ませて、要素にクラスを書くだけなので非常に簡単です。また、使用できるアニメーションの種類も100近くありとても豊富です。種類を切り替える時もクラス名を書き換えれば良いだけなので手間も掛かりません。 animte.cssの公式サイトはこちら https://animate.style CSSのanimationプロパティやkeyframesについて詳しくはこちら

CSSのanimationと@keyframesの使い方

animate.cssの使い方

ダウンロードして読み込む方法

まずはダウンロードしたファイルを読み込ませる方法です。 animate.cssはGitHubからダウンロードします。 GitHubのページはこちら https://github.com/animate-css/animate.css GitHubのページ内にある「animate.min.css」を開いて保存してください。保存した「animate.min.css」ファイルをサーバーにアップロードして、下記のようにファイルまでのパスを記述して読み込ませます。

CDNで読み込む方法

animate.cssはCDNで読み込むことが可能です。 CDNを使えばファイルのダウンロードやアップロードをする必要なく、サイトに読み込ませることができるので便利です。サイトのの中などに以下のコードを追記して読み込ませてください。

記述の仕方

animate.cssを読み込んで準備が整ったら、アニメーションさせたい要素に動きを設定していきます。 animate.cssが用意しているクラス名をHTML側で要素に追記するだけでアニメーションの種類や速度などを設定することができます。なお、バージョン3とバージョン4では記述方法が異なるので注意が必要です。読み込むanimate.cssのバージョンを確認したうえで、正しい記述を行って下さい。

animate.cssバージョン3の場合

バージョン3は、HTMLのクラスに追記してアニメーションを設定します。「 animated 」はanimate.cssを使う際に必須のクラス名です。「bounce」は動きの種類、「infinite」はアニメーションの再生回数を指定しています。実際の記述例は次の通りです。ここでは「flash」という種類の動きを設定しています。

ダミーテキスト animate.cssバージョン4の場合

バージョン4を動かすためには、バージョン3のクラス名に全て「 animate__ 」（animateとアンダーバー2つ）を付ける必要があります。 animate.cssを使う時に必須である「animated」は「animate__animated」、動きの種類も「animate__bounce」に、回数を指定する「infinite」も「animate__infinite」という書き方になります。実際の記述例は次の通りです。こちらも「flash」という種類の動きを設定しています。

ダミーテキスト動きの種類

animate.cssでは、 100種類近くの動きのパターンが用意されています。使用できる名称の一覧は公式サイトの右側に掲載されています。 https://animate.style 今回はanimate.cssで実装可能なアニメーションの動きの一覧を下に掲載しましたので参考にしてください。 animate.cssバージョン4.1.1を使用しています。バージョン3では動かないものもありますのでご注意ください。

アニメーションの繰り返し回数を変更するアニメーションの種類と同様に、繰り返し回数もクラスを付与するだけで設定が可能です。あらかじめ用意されている下記のクラスに応じて1～3回までのいずれかを設定することができます。 animate__repeat-11回のみ（初期値） animate__repeat-22回繰り返す animate__repeat-33回繰り返す無限に繰り返したい時はinfiniteを使うバージョン3までの場合は「 infinite 」、バージョン4以降は「 animate__infinite 」を追記すればリピートし続けます。ダミーテキストアニメーションの速度を変更する

アニメーションの速度もクラスを付与するだけでコントロールすることが可能です。あらかじめ用意されている下記のクラスに応じて、1回のアニメーションが完了するまでの秒数を4段階で指定することができます。秒数が短いほど動きは早くなります。なお、クラスを省略した場合は初期値である1秒が適用されます。

animate__faster0.5秒 animate__fast0.8秒 animate__slow2秒 animate__slower3秒アニメーションの開始時間を変更するアニメーションの開始時間もクラスを付与するだけで遅らせるように設定が可能です。あらかじめ用意されている下記のクラスに応じて、1秒～5秒まで1秒単位で開始を遅延させることができます。 animate__delay-1s開始を1秒遅らせる animate__delay-2s開始を2秒遅らせる animate__delay-3s開始を3秒遅らせる animate__delay-4s開始を4秒遅らせる animate__delay-5s開始を5秒遅らせる jQueryを使ってカスタマイズする jQueryを使えば、クリックされたらアニメーションさせるといったカスタマイズを行うことができます。ユーザーのアクションに応じてクラス名を付与（もしくは削除）することでアニメーションを制御します。クリックしてください #sample_square < display: block; width: 200px; height: 100px; margin: 10px; background: #dd4000; opacity: 0; transition:.5s; >#sample_square.active $(function()< $(".sample_jq").on("click",function()< $(".sample_jq").toggleClass("animate__shakeX"); $("#sample_square").toggleClass("animate__flip"); $("#sample_square").toggleClass("active"); >); >); クリックしてください

animate.cssが動かない原因

ファイルは正しく読み込まれているか？
クラス名は正しく記述できているか？

windowsの場合はシステムの視覚効果の設定にある「アニメーションコントロールと要素」という項目が無効になっているとanimate.cssが正しく動作しません。この設定を変更してみましょう。

windowsの視覚効果の設定を変更する iPhoneの視差効果の設定を変更する

iPhoneの場合は、「アクセシビリティ」にある「視差効果を減らす」という項目が有効になっているとanimate.cssによるアニメーションが動作しません。

この中に「視差効果を減らす」という項目がありますので、無効にしてください。

📎📎📎📎📎📎📎📎📎📎