Animate.cssはCSSのアニメーションを添加して水を飲むように簡単です

4203 ワード
css 3
animate.cssはクールで、面白くて、ブラウザにまたがるアニメーション効果ライブラリで、あなたのプロジェクトで自由に使用することができます.ホームページやスライダなど、突き出したい場所で使うと、水を飲むように簡単で、夢中になります.
使用法
あなたのサイトでanimateを使用します.cssは、簡単にスタイルシートをドキュメントに挿入し、アニメーションが必要な要素にCSSクラス名とアニメーションの名前を追加すればよい.そうです!CSSアニメーションの効果があります.超強力!
<head>
  <link rel="stylesheet" href="animate.min.css">
head>

注意*例
<h1 class="animated bounceOut">Animate.cssh1>

jQueryと組み合わせると、いつこれらのアニメーションを有効にするかを自分で決めることができます.jQueryのダイナミックな追加でアニメーションを使用することで、より多くのことをすることができます.
$('#yourElement').addClass('animated bounceOutLeft');

アニメーション終了イベントを検出することもできます.
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

注意:jQuery.one()はイベント処理を最大1回実行します.詳細については、ここをクリックしてください.
アニメーションの持続時間を変更したり、表示回数を変更したりすることができます.
#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

注意:必ずCSSの穏やかな接頭辞(webkit,mozなど)で「vendor」の代わりに
カスタムビルド
Animate.cssはGruntをサポートし、カスタムBuildプロセスを簡単に作成できます.まず、Gruntと他の依存関係が必要です.
$ cd path/to/animate.css/
$ sudo npm install

次にgrunt watchを実行して、カスタム生成ファイルを変更およびコンパイルします.たとえば、アニメーション効果の一部だけで、animate-configを編集するだけです.jsonファイルを選択し、使用するアニメーションを選択します.
"attention_seekers": {
  "bounce": true,
  "flash": false,
  "pulse": false,
  "shake": true,
  "swing": true,
  "tada": true,
  "wobble": true
}

公式サイトのアドレス:http://daneden.github.io/animate.css/
【CSS】iOS13, Safari13から指定なしで慣性スクロールできるようになりました。
PHPは微信の現金引き出しを実現する(企業が小銭を支払う)