あなたがブックマークすべき10のCSS3アニメーションツール

人々が動くものをより容易に知覚する傾向があるので、スマートに使用されるアニメーションは以下によってサイトのユーザーエクスペリエンスを向上させることができます。 ユーザーがすぐに気づく必要がある重要な要素に注意を向ける.

CSS3では、新しいアニメーション構文が導入されました。これを使用すると、デザインでおもしろいことがたくさんできます。クールなアニメーションを作成するのは複雑で時間がかかることがありますが、その場合はアニメーションライブラリとジェネレータをうまく使用できます。.

CSSで可能になったいくつかのアニメーションをチェックしてください。

38感動的なCSS3アニメーションデモ
CSSで作成された15の美しいテキスト効果
あなたが見なければならない30のクールなCSSアニメーション
CSS3アニメーションでバウンス効果を作成する方法

この記事では、私たちはあなた自身のアニメーションを作成することをより簡単にそしてより速くすることができる10の素晴らしいツールを見ていきます.

1. CSS3Gen CSS3アニメーションジェネレータ

CSS3Gen 基本的なアニメーションをすばやく生成できる使いやすいアニメーションジェネレータを提供します。このツールを使用して複雑なアートワークを作成することはありませんが、あまり手間をかけずに標準のアニメーションを作成する場合には最適な選択です。.

君は コードで手を汚す必要はありません, フォームのプロパティを設定し、結果をプレビューしてから、コードをコピーして自分のCSSファイルに貼り付けることができます。.

2. CSSアニメイト

もし、あんたが より複雑なアニメーションが必要, あなたが見つけるかもしれません CSSアニメイト 有用。それはより成熟したUIを持っています、あなたはわずかにより多くのプロパティを設定することができます、そしてあなたは直感的なタイムラインの助けを借りてアニメーションをフォロー、停止、そして再開することができます.

以下のようなサンプルアニメーションもあります。 “バウンス”, “振る”, そして “スイング”, あなたがジェネレータにロードして、あなたの必要性に従ってコードを修正できること.

3. CSSアニメーションジェネレータをカバーする

カバーするのアニメーションジェネレータはおそらく最良の選択です。 CSS3アニメーションを初めて使用する場合, そしてそれらがどのように機能するのかを素早く理解したい。このシンプルだが強力なツールを使用すると、CSS3が提供するさまざまな種類のアニメーションをテストし、それらの違いを簡単に確認できます。.

あなたは4つのパラメータを設定する必要があるだけです：アニメーションタイプ、アニメーション関数、秒単位の持続時間、そしてアニメーションが無限であるかどうか。準備ができたら、生成されたHTMLコードとCSSコードを取得して取得するだけです。.

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

魔法のアニメーション それを可能にするクールなCSSライブラリです。 特殊効果を使って簡単にアニメーションを配置する あなたのサイトに。たとえば、要素を消したり、左または右に開いた後、元に戻したり、下、上、左、または右に回転したりすることができます。

あなたがしなければならないのは、コードをダウンロードし、あなたのHTMLページにCSSファイルを含め、そして次のようにjQueryの助けを借りて適切なクラスを追加することです：

 $（ '。yourdiv'）。hover（function（）$（this）.addClass（ 'magictime puffIn'）;）;

また、タイマーの設定を変更したり、jQueryを使用してアニメーションを無限にすることもできます（詳細はreadmeファイルを参照してください）。.

5. Animate.css

Animate.css のセットを提供します クールでクロスブラウザなCSS3アニメーション. アニメーションは、アテンションシーカー、バウンスエントランス、バウンスエグジット、フェージングエントランスなどのグループに分類されるため、選択の欠如について不平を言うことはできません。.

あなたはGithubからコードをダウンロードすることができます、そしてあなたはあなたのHTMLページにCSSファイルを追加し、あなたがアニメートしたいHTML要素に関連するCSSクラスを追加するだけです。.

6. Bounce.js

Bounce.js あなたを可能にする便利なJavaScriptライブラリです。 複雑なアニメーションを作成する. Bounce.jsには、イージング、デュレーション、ディレイ、バウンス数などのさまざまなコンポーネントを手動でアニメーションに追加するか、すぐに使用できるプリセットを選択してからアニメーションを再生できる成熟したユーザーインターフェイスがあります。必要に応じてプロパティを微調整します.

7. AniJS

AniJS あなたのデザインにCSS3アニメーションを追加することを可能にする過冷却JavaScriptライブラリです。 洗練されたUIコンポーネントを構築する アニメーションタブ、アコーディオン、モーダル、スライドメニュー、携帯アプリの通知、スクロール表示など.

それはiOSやAndroidを含むすべての最近のブラウザで動作し、サードパーティのライブラリを必要とせず、そしてあなたが簡単にライブラリによって提供される異なる効果を試すことができるAniCollectionと呼ばれる壮観なショーケースを持って.

8.単一要素CSSスピナー

あなたは今までにあなたのデザインを強化したいと思ったことがありますか アニメーションローディングスピナー? 答えが「はい」の場合、このかわいいCSSスピナーライブラリはあなたにとって素晴らしい選択かもしれません。スピナーのCSSコードはLESSで書かれています。設定は一切ありません。コードは作成済みです。自分のHTMLファイルおよびCSSファイルに挿入するだけです。.

9.走行距離計

オドメーター に素晴らしいツールです。 あなたのサイトにクールなアニメーションメーターを配置する. これはCSSとJavaScriptのライブラリです。CSSの部分はSassで書かれています。そして、次のようなさまざまなテーマから選択できます。 “デジタル”, “鉄道駅”, そして “車”.

Odometerを使用するには、JavaScriptファイルと選択したテーマファイルをHTMLページに追加してから、 class = "走行距離計" アニメーションメーターにしたい要素を選択します。データを視覚的に表現するため、またはデータを作成するための理想的な選択 “近日公開” ページをもっと見る.

10. Snabbt.js

Snabbt.js それはミニマルなアニメーションライブラリです。 物事を簡単に移動できるようにします. ちょっとしたインスピレーションが必要な場合は、デモを見てこのスマートアニメーションツールで達成できることを確認してください。以下のスクリーンショットのアニメーション周期表は、Snabbt.jsを実装するのが簡単な可能性の1つです.

このライブラリを使用したい場合は、小さなJavaScriptを作成する必要がありますが、結果は非常に壮観なので、おそらく手間がかかります。.