ホームページ > 記事 > ウェブフロントエンド > animate.css とはどういう意味ですか?

animate.css とはどういう意味ですか?

「animate.css」とは、CSS3 のアニメーションを使用して作成されたアニメーション効果のコレクションを意味します。「animate.css」には、よく使用される多くのアニメーションがプリセットされており、すぐに使用するのに適しており、オンデマンドの変更にも便利です。構文は「」です。

#このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

animate.css の意味

animate.css は、CSS3 アニメーションを使用して作成されたアニメーション効果の CSS コレクションです。一般的に使用されるアニメーションが多数プリセットされており、使い方は非常に簡単です。この記事では、animate.css の使用方法を詳しく紹介します。

Animate.css は、いくつかの単純で一般的なアニメーションをカプセル化する、シンプルで効率的な CSS ライブラリです。これは、すぐに使用したり、オンデマンドで簡単に変更したりするのに適しています。

#ファイルをインポート#

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

#指定されたアニメーションスタイルを指定された要素に追加します

<div class="animated bounce"></div>

animated の場合は、animate.css 効果を適用するすべての要素にこのクラス名を追加する必要があります。
bounce の場合は、追加する効果のクラス名を選択するだけです。

アニメーションスタイルを要素に動的に追加したい場合は、jquery

$(&#39;#element&#39;).addClass(&#39;animated bounce&#39;);

$(&#39;#element&#39;).one(&#39;webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend 
animationend&#39;, function);

効果が完了しても、要素は (要素が見えなくなっても) ドキュメントフロー内のスペースを占有しているため、要素を実際に消したい場合は、アニメーションの完了時に要素を非表示にします。 :

$(&#39;#element&#39;).one(&#39;webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend
 animationend&#39;, function(){$(this).hide();});

(学習ビデオの共有 : css ビデオチュートリアル

、

html ビデオチュートリアル

)

以上がanimate.css とはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

続きを見る