CSSアニメーションライブラリ

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対目のクラスを追加する」ことにより、これらの機能を拡張します。単独で使用できますが、ドキュメントは、ヘルパークラスが普遍的であるため、他のアニメーションライブラリと組み合わせて使用​​できることを示唆しています。

無限

回転やパルスなどのこれらのアニメーションは、無限に実行するように特別に設計されています。

モーションUI

柔軟なCSSトランジションとアニメーションを作成するためのSASSライブラリ。

ミクロン

CSSアニメーションを使用して構築され、JavaScriptによって制御されるミニチュアインタラクションライブラリ。

存在します

Vivifyは、同じタイプの多くのアニメーションが含まれているため、Animate.cssに少し似ています。また、独自のアニメーションの多くを提供します。

hover.css

CSS3駆動のホバー効果のセットは、リンク、ボタン、ロゴ、SVG、注目の写真などに適用できます。独自の要素に簡単に適用したり、修正したり、インスピレーションを与えたりしてください。 CSS、SASS、およびLESSバージョンが利用可能です。

allanimationcss3

マジックアニメーションCSS3

火曜日です。

風変わりなCSSアニメーションライブラリ。

VHS

リバウンドゲン

csshake

モーションCSS

cssanimation.io

wickedcss

woah.css

不快

ヘキサ

mimic.css

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