プログラミング

プログラミング

PR

CSSアニメーションライブラリー25選!あなたのサイトに楽しい動きとより良い機能を

LINE25

Line25 was built in March 2009 as a place to share web design ideas and inspiration through articles, tutorials and examples of stunning site designs.

本記事は、25 Best CSS Animation Libraries
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

11,087 views

読了時間 : 約6分26秒

この記事のリストに、非常に優れたCSSアニメーションライブラリのいくつかを掲載しました。ウェブサイト設計の際に貴重な時間を節約し、またこれらのCSSアニメーションライブラリを使用して、皆さんの作品に動きと双方向型の機能を加えましょう。

 

テキスト、画像、ボタン、フォーム、タブ、ツールチップ、カードなど、あらゆる種類のWeb要素のためのCSSアニメーションやエフェクトが沢山あります。

 

 

これらのCSSアニメーションライブラリにはCSSエフェクトのための異なるスタイルがあるので、クリーンでシンプルなものを探している場合にも、もっと楽しくて一風変わったものを探している場合にも、皆さんが便利だと感じられるライブラリがきっと見つかるはずです。基本的なスライド、フェード、回転効果から、ぐらつき、パルス、鼓動などのユニークなアニメーションに至るまで、これらのCSSアニメーションライブラリは皆さんに必要なものを提供してくれるでしょう。

 

これらのアニメーションライブラリはサイトに簡単にインストールすることができ、そのほとんどは非常に軽量でレスポンシブです。

 

リストからあなたのお気に入りを見つけて使ってみましょう!

 

 

 

 

Hexa

 

Hexaはシンプルかつ軽量で印象的なCSSアニメーションライブラリです。これらのCSSアニメーションを使用して、テキスト、写真、アイコン、その他のグラフィック要素に命を吹き込んであげましょう。

 

 

 

Vivify

 

Vivifyは、ボタン、画像などのアニメーションに使用できるもう1つの無料CSSアニメーションライブラリです。ボール、パルス、左ヒット、右ヒット、シェイク、ポップ、フリップ、ジャンプ、すくい上げ、ドライブ、フェード、ロールスピン、プルおよび畳み込みなど、いくつかのアニメーション効果があります。

 

 

 

Tachyons – アニメーション

 

これらの専用クラスは、CSSアニメーションの制御に役立ちます。 CSSアニメーションの潜在能力をもっと引き出したい場合は、このツールキットを使用してください。 アニメーションキーフレームは含まれておらず、専用クラスが1つだけ組み込まれています。 Webプロジェクトでこれを使って、時間を節約しましょう!

 

 

 

Infinite – 便利なCSSアニメーション

 

数え切れないほどの非常に便利なCSSアニメーションがセットになっています。 プロジェクトでこれらを使用して、不透明度と大きさを変更して脈を打つアイテムを作ったり、警告アニメーションを作成したり、アイテムを回転させたりしましょう。

 

 

 

Motion UI

 

Motion UIは、CSSトランジションやアニメーションを作成するための強力なSassライブラリです。 もともとはFoundation for appsに統合されていたものですが、現在では単体で動作するライブラリとして使用できます。 スピード、低速移動、スライド、スケールなどのクールな効果を追加するのに使用してみてください。

 

 

 

DynCSS

 

DynCSSは、あなたのCSSを-dyn-(属性)規則のために解析するアニメーション用の素晴らしいCSSライブラリです。 皆さんのサイトに活気を与えるシンプルでダイナミックなCSSルールを作成するのに使用しましょう。

 

 

 

All animation

 

All animation.cssは、プロジェクトをより双方向型で魅力的なものにするための、楽しいアニメーションを含んだツールキットです。これらのアニメーションは、3Dエフェクトなどの追加に使用でき、多ブラウザ対応になっています

 

 

 

Animate.CSS

 

簡単に使えて多ブラウザ対応のCSSアニメーションのもう一つのライブラリです。バウンス、フラッシュ、パルス、シェイク、スイング、よろめきといったアニメーションを加える時などに使用してみましょう!

 

 

 

Hover.CSS

 

これは、CSS3で動作するホバーエフェクトのセットです。これらのCSSアニメーションは、リンク、ボタン、ロゴ、SVG、画像、その他の要素に加えることができ、CSS、Sass、LESSで利用できます。

 

 

 

Effeckt.CSS

 

このCSSライブラリを使用して、サイトに手の込んだトランジションを追加し、ユーザーエクスペリエンスを大幅に向上させましょう!モーダル、ボタン、リスト、ページトランジション、キャプション、ツールチップ、タブ、フォームなどのパフォーマンス良好なCSSトランジションとアニメーションを作成することができます。


 

 

 

Magic CSS

 

特殊なエフェクトを備えたCSS3アニメーション群です。あなたのデザインに刺激を加えましょう!マジックエフェクト、アクセサリー、静的エフェクト、パースペクティブ、回転、スライド、爆弾、飛び出し、スペースエフェクトの中から気に入ったものを選びましょう。

 

 

 

CSSHAKE

 

DOMを動かしたいのなら、これらのCSSクラスが役に立つかもしれません。簡単にインストールできます。 各シェイクアニメーション用に分割されているファイルをダウンロードしましょう。

 

 

 

Repaintless CSS

 

Repaintless.cssは皆さんのサイトの速度を落とすことなくインタラクティブにすることのできるクールなアニメーションをいくつも含む軽量CSSアニメーションライブラリです。 スライドエフェクトをいとも簡単に追加することができますよ!

 

 

 

Tuesday

 

このCSSアニメーションライブラリは、拡張、縮小、ドロップ、倒れ込み、ヒンジなどの珍しいサイト入退室ページ用エフェクトを追加できる、単体で使用できるライブラリです。

 

 

 

Obnoxious

 

これらのアニメーションは楽しくて目新しいです! どんなウェブサイトにも適しているという訳ではないかもしれませんが、間違いなく皆さんのプロジェクトを目立たせることができるでしょう。 サイトの要素をシェイクしたり、強調したり、光らせたり、ねじったりしましょう。

 

 

 

Flutter – CSS画像ホバーエフェクト&Lightbox

 

Flutterは、画像ホバーエフェクト、2列および3列システム、4種類のlightboxなど、12の効果を持つCSS画像ホバーエフェクト&Lightboxアニメーションのパッケージです。

 

 

 

Skloading – CSS3アニメーション

 

Skloadingはあらゆるデザインをカスタマイズ可能なCSS3アニメーションライブラリです。 この読み込みアニメーションのセットをダウンロードし、プロジェクトで使ってみてください。

 

 

 

Viavi CSS3スクロールエフェクト

 

これらのCSS3スピナーやローダーをチェックして、ユーザーの注意をひきつけることができます。 これらは完全にレスポンシブなデザインであり、どの画面サイズにも完璧に対応しれくれます。

 

 

 

CSSのバブルとツールチップ

 

これらのCSSバブルとCSSツールチップは、大幅に時間を節約するのに役立ちます。 長方形の泡、雲、さらにはハート形の泡もあります。 また、ツールチップは位置、テキスト、フォーム、バー、またはボタン用のものが揃っています。

 

 

 

Animatia – CSS画像ホバーエフェクト

 

Animatiaは、ボタンスタイル、オーバーレイエフェクト、画像エフェクトなど、多くのCSS要素を含むCSS画像ホバーエフェクト集です。

 

 

 

CSS Box and Text Shadows

 

CSS Box and Text Shadowsをダウンロードして使ってみましょう。 このキットには、テキスト、ボタン、画像などに適用できる40個のシャドウスタイルが付属しています。

 

 

 

HoverMe

 

HoverMeは、4つのボタン画像、10個の読み込みボタン、8個の高度なアニメーションなどを含む素晴らしいCSS3アニメーションセットです。

 

 

 

Wickedcss

 

Wickedcssは楽しいCSS3アニメーションのライブラリです。 打ち込み、スライド、パルス、鼓動、あるいは回転アニメーションを使用してデザインにアクセントを加えましょう。

 

 

 

Woah

 

Whahは、エキセントリックなWeb開発者向けのCSSアニメーションライブラリです。 どのような種類のWeb要素にも大変珍しいCSSアニメーションを追加できます。

 

 

 

Motion CSS

 

Motion CSSは、インストールが非常に簡単な、すばらしいアニメーションライブラリです。 CSSファイルを読み込んで、要素に特定のクラスを適用するだけです。

 

 

 

 

※本記事は、25 Best Nature WordPress Themesを翻訳・再構成したものです。

 

 

 

▼こちらの記事もおすすめです!

 

 

 

おすすめ新着記事

おすすめタグ