CSSアニメーションライブラリ-CSSチュートリアル-php.cn

Webには、Webページにアニメーション効果を作成するのに役立つ多くのアニメーションライブラリがあります。これらのライブラリは、アニメーションの構文やテクニックに焦点を当てる代わりに、直接使用できるプリセットアニメーションを提供します。たとえば、「Animate-Flip-Up」などのクラス名を追加して、要素を上向きにします。すぐに始めたい場合は、このタイプのライブラリは非常に実用的です。

個人的にお勧めします。1）CSSアニメーションの文法を学び、アニメーションの原則を習得します。 2）ウェブサイトスタイルに応じてアニメーションをカスタマイズします。ただし、これらのライブラリを探索することで、インスピレーションを与え、コードの例を提供し、プロジェクトの基盤を築くことができます。

これらのライブラリの概要を見てみましょう。一部のライブラリは、さまざまなアプローチを採用しています。必要なクラス、SASS Mixin、Lightweight JavaScriptライブラリのみを提供して、クラスを追加/削除するなど。しかし、それらは本質的に「CSSアニメーションライブラリ」です。（一部のライブラリは名前に「CSS3」を持っていますが、それは少し時代遅れに見えますが、今では人々がそれをめったに呼んでいません。）

アニメーションは楽しいものとインタラクティブ性を高めることができますが、すべてのユーザーがWebを閲覧している間にアニメーションを見たいとは限らないことを忘れないでください。 Eric Baileyの「Revisitingが還元モーションを好む、Motion Mediaクエリの削減」記事を参照して、好みの少ない、またはアニメーションのないユーザーに適応する方法を学習してください。

アニスタ

好きなアニメーションを選択すると、キーフレームアニメーションを呼び出すクラス名が提供されます（両方をコピーして貼り付ける必要があります）。ポイントは、必要な部品を使用するだけでいいということです。

animate.css

Dan Edenが作成した古典的なCSSアニメーションライブラリの1つ。

タチョン - アニメート

Tachyons自体は、クラスを追加して、あらゆるものを設計するための多数のユーティリティクラスを含むAtomic CSSライブラリです。 Tachyons-animateは、「CSSアニメーションを調整するのに役立つ1対目のクラスを追加する」ことにより、これらの機能を拡張します。単独で使用できますが、ドキュメントは、ヘルパークラスが普遍的であるため、他のアニメーションライブラリと組み合わせて使用できることを示唆しています。