ホームページ > ウェブフロントエンド > htmlチュートリアル > アニメーション ライブラリ Animate.css_html/css_WEB-ITnose

アニメーション ライブラリ Animate.css_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:34:13
オリジナル
1742 人が閲覧しました

ノートの共有:

使用法: 公式 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 回実行されます。詳細についてはマニュアルをご覧ください

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート