CSS3 アニメーション ライブラリを共有する

はじめに

animate.cssは、シェイク、フラッシュ、バウンス、反転、回転(rotateIn/rotateOut)、フェードイン/フェードアウトなど60種類以上のアニメーション効果がプリセットされている海外製のCSS3アニメーションライブラリです。 、ほぼすべての一般的なアニメーション効果が含まれます。

animate.css を使用して CSS3 アニメーション効果を作成するのは非常に便利で高速ですが、animate.css のコードを確認することをお勧めします。そこから何かを学べるかもしれません。

互換性

ブラウザの互換性: もちろん、CSS3 アニメーションの

プロパティをサポートするブラウザとのみ互換性があります: IE10+、Firefox、Chrome、Opera、Safari。

使い方

1. ファイル

<link rel="stylesheet" href="animate.min.css">

をインポートし、

<p class="animated bounce" id="dowebok"></p>

を使用して要素に

classを追加し、ページを更新すると、アニメーション効果が表示されます。アニメーションは、アニメーションの継続時間を定義するグローバル 変数 に似ています。バウンスは、アニメーションの特定のアニメーション効果の名前であり、任意の効果を選択できます。

アニメーションが無限に再生される場合は、クラスを無限に追加できます。

これらのクラスは、

JavaScript または jQuery を使用して要素に追加することもできます。

$(function(){
    $('#dowebok').addClass('animated bounce');
});

一部のアニメーション効果では、フェードアウトや左へのスライドなど、最終的に要素が非表示になります。クラスを追加するには

削除 を実行します。例:

$(function(){
    $('#dowebok').addClass('animated bounce');
    setTimeout(function(){
        $('#dowebok').removeClass('bounce');
    }, 1000);
});

animate.css デフォルト設定は希望どおりにならない場合があるため、リセットできます。例:

#dowebok {
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}

ブラウザーのプレフィックスの追加に注意してください。

【関連おすすめ】

1.

CSS3の無料ビデオチュートリアル

2.

CSS3学習のためのアニメーションの詳細な説明

3.

アニメーション制作と学習のためのCSS3の指導

4.新しい CSS3 の追加機能

5. css3 の新機能の詳細な説明

以上がCSS3 アニメーション ライブラリを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。