フロントエンドにふさわしい CSS3 アニメーションライブラリ (ツール) 10 個 collection_html/css

CSS3 アニメーションは、生成された CSS コードの進行状況バーをドラッグすることでアニメーションを制御できます。下のテキストボックスに自動的に表示され、コピーしてアプリケーションに貼り付けて直接使用できます。

上記のツールでは希望のアニメーションを作成できないと思われる場合は、CSS Animate を検討してください。たとえば、アニメーションの開始状態と終了状態の座標、サイズ、透明度を同時に設定できるため、より複雑なアニメーションを作成できます。

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

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

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

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

Odometer は、たとえば、Web サイト上の人の数の増加、カウントダウン、その他の数値関連のアニメーション効果を表示するために使用されます。

Hover.css は、2D 変換、アイコン変換、背景変換などを含む多数のホバー効果を提供します。また、リンク、ボタン、ロゴ、SVG、さらには画像など、ほぼすべての要素に適用できます。

ホームページ

ウェブフロントエンド

htmlチュートリアル

フロントエンドにふさわしい CSS3 アニメーションライブラリ (ツール) 10 個 collection_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:19 AM

現在、Web サイトやアプリのデザインでは、ユーザーエクスペリエンスがますます重視されています。優れたアニメーションにより、アプリケーションがよりインタラクティブになり、より多くのユーザーを引き付けることができます。私は通常、シンプルで一貫性のあるアニメーション効果をウェブサイトに追加します。私が使用するテクノロジーは、CSS3に基づいてアニメーション効果を生成するためのSASS+bourbonです。ただし、CSS3 でのダイナミックエフェクトの定義に慣れていない場合、またはより簡単かつ直接的な方法でアプリケーションにダイナミックエフェクトを導入したい場合は、次の 10 個の優れたダイナミックエフェクトライブラリ (ツール) を参照して使用できます。

1. Animate.css

Animate.css は、私のお気に入りの CSS3 アニメーション効果ライブラリの 1 つで、CSS3 アニメーション効果に詳しくないが、独自の Web サイトまたは H5 ベースにアニメーションを導入したい人に非常に適しています。アプリ。 Animate.css で事前定義されたアニメーション名をアニメーション化する必要がある要素に追加するだけでよいためです。たとえば、一般的なもの: バウンス、フラッシュ、フェードイン、フェードアウトなど。合計 75 種類の異なるダイナミックエフェクトがあり、基本的なニーズを完全に満たします。

もちろん、このライブラリを使用する際にはいくつかの注意事項があります。たとえば、要素にアニメーションスタイルを追加してアニメーションを完成させた後は、すぐにアニメーションスタイルを削除することをお勧めします。さらに、アニメーションの長さ、振動の振幅などを調整する必要もあります。というのも、デフォルト設定ではアニメーションが速すぎて迫力がありすぎると感じているからです。 Animate.css には、これらの調整方法を説明する詳細なドキュメントが用意されています。

2. Bounce.js

Bounce.js は、CSS3 アニメーションを生成できる小さなツールで、コンポーネントを追加して、Scale、Translate、Rotate、を含めることができます。スキューおよびその他のアニメーションタイプを設定し、必要な効果が得られたら、アニメーションを CSS でエクスポートしてアプリケーションに適用できます。

3. CSS3 アニメーション

CSS3 アニメーションは、生成された CSS コードの進行状況バーをドラッグすることでアニメーションを制御できます。下のテキストボックスに自動的に表示され、コピーしてアプリケーションに貼り付けて直接使用できます。

4. CSS Animate

上記のツールでは希望のアニメーションを作成できないと思われる場合は、CSS Animate を検討してください。たとえば、アニメーションの開始状態と終了状態の座標、サイズ、透明度を同時に設定できるため、より複雑なアニメーションを作成できます。

5.マジックアニメーション

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

6.AniJS

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

<div data-anijs="if: click, do: flipInY, to: .container-box"></div>

ログイン後にコピー

7.単一要素 CSS スピナー

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

8.Snabbt.js

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

snabbt(element, {  position: [200, 0, 0],  easing: function(value) {    return value + 0.3 * Math.sin(2*Math.PI * value);  }}).snabbt({  position: [0, 0, 0],  easing: 'easeOut'});

ログイン後にコピー

9.Odometer