animate.css とはどういう意味ですか?-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2022-09-14 17:01:19

オリジナル

2709 人が閲覧しました

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

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 サイトの他の関連記事を参照してください。