共有する価値のある 10 個の CSS3 アニメーションライブラリ (ツール)

高洛峰

リリース： 2017-04-18 17:24:19

オリジナル

1877 人が閲覧しました

現在、Web サイトはユーザーエクスペリエンスにさらに注目しており、優れたアニメーション効果によりアプリケーションがよりインタラクティブになり、より多くのユーザーを引き付けることができます。 Web サイトにアニメーションを追加すると、ページ全体がダイナミックに見えます。ただし、CSS3 でのダイナミックエフェクトの定義に慣れていない場合、またはより簡単かつ直接的な方法でアプリケーションにダイナミックエフェクトを導入したい場合は、次の 10 個の優れたダイナミックエフェクトライブラリ (ツール) を参照して使用できます。

1. Animate.css

Animate.css は、私が好む CSS3 アニメーション効果ライブラリです。CSS3 アニメーション効果に慣れていないが、自分の Web サイトや H5 に導入したい人に非常に適しています。アニメーションベースのアプリ。 Animate.css で事前定義されたアニメーション名をアニメーション化する必要がある要素に追加するだけでよいためです。たとえば、一般的なもの: バウンス、フラッシュ、フェードイン、フェードアウトなど。合計 75 種類の異なるダイナミックエフェクトがあり、基本的なニーズを完全に満たします。もちろん、このライブラリを使用するにはいくつかの注意事項があります。たとえば、要素にアニメーションスタイルを追加してアニメーションを完成させた後は、すぐにアニメーションスタイルを削除することをお勧めします。さらに、アニメーションの長さ、振動の振幅などを調整する必要もあります。というのも、デフォルト設定ではアニメーションが速すぎて迫力がありすぎると感じているからです。 Animate.css には、これらの調整方法を説明する詳細なドキュメントが用意されています。共有する価値のある 10 個の CSS3 アニメーションライブラリ (ツール)

2. Bounce.js

Bounce.js は、CSS3 アニメーションを生成できる小さなツールです。JavaScript で書かれており、コンポーネントを追加して、Scale、Translate、を含めることができます。回転、傾斜、その他のアニメーションタイプを設定し、必要な効果が得られたら、アニメーションを CSS でエクスポートして、アプリケーションに適用できます。共有する価値のある 10 個の CSS3 アニメーションライブラリ (ツール)

3. CSS3 アニメーション

CSS3 アニメーションは非常にシンプルで使いやすいアニメーションツールで、提供されるシンプルなグラフィカルインターフェイスでいくつかのプログレスバーをドラッグすることでアニメーションを制御でき、CSS コードが自動的に生成されます。下のテキストボックスに表示され、コピーしてアプリケーションに貼り付けて直接使用できます。共有する価値のある 10 個の CSS3 アニメーションライブラリ (ツール)

4. CSS Animate

上記のツールでは希望のアニメーションを作成できないと思われる場合は、CSS Animate を検討してください。たとえば、アニメーションの開始状態と終了状態の座標、サイズ、透明度を同時に設定できるため、より複雑なアニメーションを作成できます。共有する価値のある 10 個の CSS3 アニメーションライブラリ (ツール) 5. マジックアニメーション

マジックアニメーションは、Animate.css に非常に似ており、一連の事前定義されたアニメーション効果を備えた CSS ライブラリです。ただし、Animate.css との最大の違いは、定義されているアニメーションがより魅力的でクールであることです。Web サイトも非常にトレンディな場合は、この CSS アニメーションライブラリの使用を検討できます。

共有する価値のある 10 個の CSS3 アニメーションライブラリ (ツール) 6.AniJS

AniJSはJavaScriptで制御されるアニメーションライブラリです。チェーン構文を通じてアニメーションを定義できます。たとえば、次の例では、ユーザーがクリックすると、この要素は Y 軸に沿って反転します。

共有する価値のある 10 個の CSS3 アニメーションライブラリ (ツール) 7. 単一要素 CSS スピナー

システムがデータの読み込み中または処理中であることを表現するために、いくつかのアニメーション効果が必要になることがよくあります。 GitHub 上のプロジェクトである Single Element CSS Spinners は、読み込みに使用できる非常に美しい CSS3 アニメーションのセットを提供します。

8.Snabbt.js

Sanbbt.js は、私がとても気に入っているアニメーションライブラリです。非常に小さく、わずか 5K なので、モバイルアプリケーションで使用できます。また、チェーン構文もサポートしているため、複雑なアニメーションの組み合わせを簡単に作成できます。共有する価値のある 10 個の CSS3 アニメーションライブラリ (ツール)