- animate.cssのダウンロードとインポート: まず、animate.cssをダウンロードしてWebページにインポートする必要があります。animate.cssの公式ウェブサイト（https://animate.style/）から最新のバージョンをダウンロードし、HTMLファイル内で以下のようにインポートします。
<link rel="stylesheet" href="path/to/animate.css">- 要素にアニメーションクラスを追加する: 次に、アニメーションを適用したい要素にクラスを追加します。例えば、要素にfade-inのアニメーションを追加する場合は、以下のようにします。
<div class="animate__animated animate__fadeIn">要素の内容</div>- JavaScriptでアニメーションをトリガーする: アニメーションをJavaScriptでトリガーするには、要素を操作するJavaScriptコードを記述します。以下は、ボタンをクリックした時に要素にアニメーションを追加する例です。
<button onclick="addAnimation()">アニメーションを開始</button>
<div id="animatedElement">要素の内容</div>
<script>
function addAnimation() {
var element = document.getElementById("animatedElement");
element.classList.add("animate__animated", "animate__bounce");
}
</script>上記の例では、addAnimation関数がボタンクリック時に実行され、animatedElementというIDを持つ要素に"animate__bounce"というアニメーションクラスが追加されます。
以上が、JavaScriptでanimate.cssを使用する方法の基本的な例です。さまざまなアニメーション効果やトリガー条件を組み合わせることで、より複雑なアニメーションを実現することができます。詳細な情報については、animate.cssの公式ドキュメントを参照してください。