ノートの共有:
使用法: 公式 Web サイト (http://daneden.github.io/animate.css/) にアクセスし、animate.min.css ファイルをダウンロードします。ここをクリックしてください
1. まずアニメーション CSS ファイルを導入します
<head> <link rel="stylesheet" href="animate.min.css"></head>
2. 指定された要素に指定されたアニメーション スタイル名を追加します
<div class="animated bounceOutLeft"></div>
これには 2 つの基本的なスタイル名が含まれています。実装したい要素にはこれを追加する必要があります。 2 番目は、指定されたアニメーション スタイル名です。
アニメーションの長さを変更したり、遅延を増やしたり、表示時間を変更したりすることができます:
#yourElement { -vendor-animation-duration: 3s; -vendor-animation-delay: 2s; -vendor-animation-iteration-count: infinite;}注: CSS プレフィックス (webkit、moz など) の「vendor」を必ず置き換えてください
3.アニメーション スタイルを要素に動的に追加するには、jquery を使用します:
$('#yourElement').addClass('animated bounceOutLeft');
4. アニメーション効果が完了したら、次のコードを使用してイベントを追加してアニメーション終了イベントを検出することもできます:
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);Note : jQuery.one() イベント処理は最大 1 回実行されます。詳細についてはマニュアルをご覧ください
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
