ホームページ > 記事 > ウェブフロントエンド > アニメーション ライブラリ Animate.css_html/css_WEB-ITnose
アニメーション ライブラリ Animate.css_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:34:131682ブラウズ
ノートの共有:
使用法: 公式 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 回実行されます。詳細についてはマニュアルをご覧ください
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。