ウェブサイトの印象を大きく左右する「動き」。
現役Webデザイナーがこれは外せない!というCSSアニメーションライブラリをまとめてご紹介。
任意の要素にクラスを付与するだけで、用途に応じたアニメーションを実装できる便利なライブラリを整理しています。
フワフワやユラユラ、ポヨンといった弾む系の動きから、背景アニメーションなどWebサイトの印象づくりに欠かせない動きが揃います。GitHubレポジトリのスター数が多いものを中心にセレクト。
- 1. 万能CSSアニメーション
- 2. 文字エフェクト向け
- 3. ホバーエフェクト向け
- 4. 画像、背景向け
- 5. ふわふわ、ゆらゆら、面白系
- 6. ハンバーガーメニュー向け
- 7. クリエイティブなアニメーション
- 8. よりなめらかな動きを表現するには
- 9. アニメーションの参考リソース一覧
万能CSSアニメーション
基本となる動きにはじまり、inやoutなどのエフェクトや文字テキスト、背景アニメーション、注意を引く系の動きなどあらゆるアニメーションを集めたライブラリ。サンプルもリアルタイムで確認でき、CSSコードをコピペしてそのまま使えるのも便利です。
ウェブサイトで利用できるCSSアニメーションツールで、CSS変数を利用しているので、@keyframeを書かずにあらゆる動きを表現できます。
jQueryやCSSアニメーションをはじめたばかりの方へ向けて、近年のウェブサイトで利用されている基本的な動きをまとめたサイト。
とにかくサイトに動きをつけたいけど、何から手をつけて良いか分からないというひとにオススメ。書籍と連動しており、「動きの逆引き事典」としても便利。
ハンバーガーメニューのさまざまな動きにはじまり、
サイトの印象を決める「背景の動き」も豊富に揃います。
Webデザイナーの技が光る、ボタンデザインもさまざまな動きで表現されています。より実践的な動きをまとめた書籍第2弾も販売中です。
文字エフェクト向けCSSアニメーション
クロスブラウザ対応の基本的なアニメーションをまとめたライブラリです。ほぼすべてのプロジェクトのニーズを満たすことができるエフェクトが収録されています。
用意されたスタイルシートを読み込み、任意の要素にクラス名を追加するだけのお手軽ライブラリ。CSSアニメーションだけでなく、GreenSockバージョンにも対応しています。
基本的なアニメーションをすべて網羅したライブラリで、クラス名を追加するだけで利用できる手軽さも◎。アニメーションの遅延などより細かく調整できるクラスが揃っているのも、このアニメーションライブラリの特長。
テキストリンクやナビメニューなどに最適なCSSアニメーションも集めています。
ホバーエフェクト向けCSSアニメーション
ホバーエフェクトやローディングなど、コピペで利用できるCSSスタイルコレクション集。
コピー&ペーストでアニメーションを追加できるCSSライブラリ。ホバーエフェクトやボタン、ローディングエフェクトが中心。
50種類のボタンスタイルが揃い、クリックひとつでCSSをコピーできます。
画像、背景向けCSSアニメーション
美しい画像ホバーエフェクトを集めたミニCSSライブラリ。
画像向けホバーエフェクト44種類をセットにしたライブラリで、オープンソースのフリー素材として便利なアイテム。
複数のパネルをCSSアニメーションで展開するユニークなツール。パネル数や遅延時間、エフェクトなど細かい調整も手軽に行うことができ、できあがったアニメーションはCSSまたはSCSSで出力できます。
Animated CSS Background Generator
アニメーション付きの背景デザインをCSSのみで作成し、ボタンひとつでコードを取得できる便利オンラインツール。
Animated Gradient Background Generator
アニメーションで変化する背景用のグラデーションを作成できるオンラインツール。グラデーションの色や角度、アニメーション速度も細かく調整できます。アイデアが浮かばないときは、「Random」ボタンをクリック。
ユニークな形のSVGシェイプ・ディバイダーを作成できるオンラインツール。ウェブサイトのコンテンツをより魅力的にできる、便利な美しいスタイルが素敵。Animateにチェックを入れることで、CSSアニメーションを追加できます。
ふわふわ、ゆらゆら、面白系CSSアニメーション
ゆらゆら、ふわふわ、ポヨンとした弾む系の動きが魅力的なアニメーションを収録。サンプルの確認もその場でできて便利です。
ユラユラとした小さな揺れからガクガクと激しい動きまで、面白いアニメーションを中心に集めたミニライブラリ。
CSSファイルを読み込み、クラス名を追加するだけで、ロケット発射などあまり他では見かけない、ユニークなCSSアニメーションを追加できるライブラリ。
インターフェースによりユニークなマイクロインタラクションを追加することを想定したライブラリ。多様性はあまりありませんが、ユーザーエクスペリエンスを充実させるのには十分。
ガクガクと震えるユニークな動きが人気の定番CSSアニメーションライブラリ。
ハンバーガーメニュー向けCSSアニメーション
今ではウェブサイトの必須用途となった「ハンバーガーメニュー」。クラス名を変更するだけで、さまざまな動きを取り入れることができる便利ライブラリ。
クリエイティブなアニメーション
このツールはCSSコードを使って、アップロードしたSVGファイルのstroke
とfill
プロパティのアニメーションを作成するAnimistaのスピンオフ・プロジェクト。
遠近感を利用した、奥行き感のある3DデザインをCSSで表現するサンプル集。コードをそのままコピーできるので、カスタマイズも自由自在。
CSSのbackground-image
プロパティを利用し破線を作成できる、ありそうでなかったジェネレーター。
よりなめらかな動きを表現するには
滑らかなアニメーションに欠かせないイージングを、一般的なインターフェースをつかったサンプル例5つで確認、調整できるオンラインツール。カスタムで自分専用のペジェ曲線を試すこともできます。
各イージング機能のパラメーターの変化を、具体的なサンプル例と一緒に確認できるシートシート。
アニメーションの参考リソース一覧
以下は、動きのあるウェブサイトを制作するときに参考にしたい、アニメーションの基本原則などをまとめています。
Webデザインではより軽量なLottieによるアニメーションも注目されています。
あのディズニーのキャラクターの動きを、Webサイトで再現できるCSSもありますよ。
スクロール追従型アニメーションなど、JS関連ライブラリをまとめています。
超軽量なファイルサイズによる最速パフォーマンスを掲げた、ウェブアニメーションAPIライブラリ。使い方もシンプルで、はじめてのひとでも分かりやすく、詳しい公式ドキュメントも参考に。
スマホで驚くほどタッチ操作フレンドリーな、3Dパララクスホバーエフェクトを作成できる、軽量かつ無料オープンソースのJavaScriptライブラリ。没入感のあるデザインを手軽に実現できます。
Webアニメーションについて詳しく解説したデザインコースで、アニメーションの基本原則からホバーエフェクト、スクリーンに応じたアニメーションなど、細かい動きをデモと一緒に学びます。
実際にアニメーションを効果的に活用したサンプル例コレクション。今後のデザイン制作の参考にいかがでしょう。