Advertisement

 

ウェブサイトの印象を大きく左右する「動き」。

 

現役Webデザイナーがこれは外せない!というCSSアニメーションライブラリをまとめてご紹介。

 

任意の要素にクラスを付与するだけで、用途に応じたアニメーションを実装できる便利なライブラリを整理しています。

 

フワフワやユラユラ、ポヨンといった弾む系の動きから、背景アニメーションなどWebサイトの印象づくりに欠かせない動きが揃います。GitHubレポジトリのスター数が多いものを中心にセレクト。

 


コンテンツ目次

 

万能CSSアニメーション

Animista

基本となる動きにはじまり、inやoutなどのエフェクトや文字テキスト、背景アニメーション、注意を引く系の動きなどあらゆるアニメーションを集めたライブラリ。サンプルもリアルタイムで確認でき、CSSコードをコピペしてそのまま使えるのも便利です。

 

 

AnimXYZ

ウェブサイトで利用できるCSSアニメーションツールで、CSS変数を利用しているので、@keyframeを書かずにあらゆる動きを表現できます。

 

 

動くWebデザインアイデア帳

jQueryやCSSアニメーションをはじめたばかりの方へ向けて、近年のウェブサイトで利用されている基本的な動きをまとめたサイト。

 

とにかくサイトに動きをつけたいけど、何から手をつけて良いか分からないというひとにオススメ。書籍と連動しており、「動きの逆引き事典」としても便利。

 

ハンバーガーメニューのさまざまな動きにはじまり、

 

 

サイトの印象を決める「背景の動き」も豊富に揃います。

 

 

Webデザイナーの技が光る、ボタンデザインもさまざまな動きで表現されています。より実践的な動きをまとめた書籍第2弾も販売中です。

 

 

文字エフェクト向けCSSアニメーション

Animate.CSS

クロスブラウザ対応の基本的なアニメーションをまとめたライブラリです。ほぼすべてのプロジェクトのニーズを満たすことができるエフェクトが収録されています。

 

 

CSS Animation io

用意されたスタイルシートを読み込み、任意の要素にクラス名を追加するだけのお手軽ライブラリ。CSSアニメーションだけでなく、GreenSockバージョンにも対応しています。

 

 

vov.css

基本的なアニメーションをすべて網羅したライブラリで、クラス名を追加するだけで利用できる手軽さも◎。アニメーションの遅延などより細かく調整できるクラスが揃っているのも、このアニメーションライブラリの特長。

14-vov

 

 

テキストリンクやナビメニューなどに最適なCSSアニメーションも集めています。

この記事では、CSSでできるクリエイティブなリンクホバーエフェクト6個をご紹介します。 数行のCSSをコピペするだけで実装でき、ウェブサイトをより魅力
この記事では、ナビゲーションメニューやテキストリンクを魅力的にするCSSホバーアニメーションをまとめています。 どれもHTMLスニペットとして公開され

 

 

ホバーエフェクト向けCSSアニメーション

CSS Wand

ホバーエフェクトやローディングなど、コピペで利用できるCSSスタイルコレクション集。

css-wand

 

 

CSS Animo

コピー&ペーストでアニメーションを追加できるCSSライブラリ。ホバーエフェクトやボタン、ローディングエフェクトが中心。

css-animo

 

 

CSS Buttons App

50種類のボタンスタイルが揃い、クリックひとつでCSSをコピーできます。

Webサイトにおける「ボタン」は、使いやすさと分かりやすさが重要です。このバランスがなかなか悩みどころで、いつも同じスタイルのボタンを色を変えて再利用、なんてことも

 

 

画像、背景向けCSSアニメーション

Izmir Hover Effects

美しい画像ホバーエフェクトを集めたミニCSSライブラリ。

 

 

Image Hover.css

画像向けホバーエフェクト44種類をセットにしたライブラリで、オープンソースのフリー素材として便利なアイテム。

 

 

CSSYNTH

複数のパネルをCSSアニメーションで展開するユニークなツール。パネル数や遅延時間、エフェクトなど細かい調整も手軽に行うことができ、できあがったアニメーションはCSSまたはSCSSで出力できます。

 

 

Animated CSS Background Generator

アニメーション付きの背景デザインをCSSのみで作成し、ボタンひとつでコードを取得できる便利オンラインツール。

animated-css-background-generator

 

 

Animated Gradient Background Generator

アニメーションで変化する背景用のグラデーションを作成できるオンラインツール。グラデーションの色や角度、アニメーション速度も細かく調整できます。アイデアが浮かばないときは、「Random」ボタンをクリック。

 

 

SVG Shape Divider

ユニークな形のSVGシェイプ・ディバイダーを作成できるオンラインツール。ウェブサイトのコンテンツをより魅力的にできる、便利な美しいスタイルが素敵。Animateにチェックを入れることで、CSSアニメーションを追加できます。

 

 

ふわふわ、ゆらゆら、面白系CSSアニメーション

Animation Library

ゆらゆら、ふわふわ、ポヨンとした弾む系の動きが魅力的なアニメーションを収録。サンプルの確認もその場でできて便利です。

 

 

Obnoxious.CSS

ユラユラとした小さな揺れからガクガクと激しい動きまで、面白いアニメーションを中心に集めたミニライブラリ。

 

 

Rocket

CSSファイルを読み込み、クラス名を追加するだけで、ロケット発射などあまり他では見かけない、ユニークなCSSアニメーションを追加できるライブラリ。

 

 

Magic Animation

インターフェースによりユニークなマイクロインタラクションを追加することを想定したライブラリ。多様性はあまりありませんが、ユーザーエクスペリエンスを充実させるのには十分。

2-magic-animations

 

 

CSS Shake

ガクガクと震えるユニークな動きが人気の定番CSSアニメーションライブラリ。

 

 

ハンバーガーメニュー向けCSSアニメーション

Hamburgers CSS

今ではウェブサイトの必須用途となった「ハンバーガーメニュー」。クラス名を変更するだけで、さまざまな動きを取り入れることができる便利ライブラリ。

 

 

クリエイティブなアニメーション

SVG Arista

このツールはCSSコードを使って、アップロードしたSVGファイルのstrokefillプロパティのアニメーションを作成するAnimistaのスピンオフ・プロジェクト。

 

 

CSS 3D Transform Examples

遠近感を利用した、奥行き感のある3DデザインをCSSで表現するサンプル集。コードをそのままコピーできるので、カスタマイズも自由自在。

 

 

Dashed Border Generator

CSSのbackground-imageプロパティを利用し破線を作成できる、ありそうでなかったジェネレーター。

 

 

よりなめらかな動きを表現するには

Easings.co

滑らかなアニメーションに欠かせないイージングを、一般的なインターフェースをつかったサンプル例5つで確認、調整できるオンラインツール。カスタムで自分専用のペジェ曲線を試すこともできます。

easings

 

 

Easing Functions Cheat Sheet

各イージング機能のパラメーターの変化を、具体的なサンプル例と一緒に確認できるシートシート。

easing_functions_cheat_sheet

 

 

アニメーションの参考リソース一覧

以下は、動きのあるウェブサイトを制作するときに参考にしたい、アニメーションの基本原則などをまとめています。

海外サイト Medium で公開された The ultimate guide to proper use of animation in UX by Taras S

 

Webデザインではより軽量なLottieによるアニメーションも注目されています。

最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの

 

あのディズニーのキャラクターの動きを、Webサイトで再現できるCSSもありますよ。

この記事では、ディズニーによるアニメーションの基本原則を、どのようにWebサイトやUIデザインに適用できるか、具体的なサンプル例と一緒に紹介しています。
PhotoshopVIP編集部: 2015年3月30日に公開された記事を再度編集、追加しています。 フロントエンド・デザイナーやデベロッパーは

 

スクロール追従型アニメーションなど、JS関連ライブラリをまとめています。

アニメーション(英: Animation)は、ウェブデザイン制作で必要とされる人気トレンドのひとつです。かろうじて気付くような控えめなローディングから、映画のような

 

Motion One

超軽量なファイルサイズによる最速パフォーマンスを掲げた、ウェブアニメーションAPIライブラリ。使い方もシンプルで、はじめてのひとでも分かりやすく、詳しい公式ドキュメントも参考に。

 

 

Atropos JS

スマホで驚くほどタッチ操作フレンドリーな、3Dパララクスホバーエフェクトを作成できる、軽量かつ無料オープンソースのJavaScriptライブラリ。没入感のあるデザインを手軽に実現できます。

 

 

Web Animation Course

Webアニメーションについて詳しく解説したデザインコースで、アニメーションの基本原則からホバーエフェクト、スクリーンに応じたアニメーションなど、細かい動きをデモと一緒に学びます。

 

 

実際にアニメーションを効果的に活用したサンプル例コレクション。今後のデザイン制作の参考にいかがでしょう。

最近見かける最新Webデザインでは、「動き」を効果的に活用したアニメーションテクニックが注目されています。 この記事では、表現力をアップする動きのある
ウェブデザインが目まぐるしく変化するなか、アニメーションを効果的に利用し、動きを取り入れたUIデザインがますます重要となっています。 この記事では、思
この記事では、ウェブサイトの印象が決まる「動き」に注目した参考Webアニメーション45個をまとめてご紹介します。 動きを取り入れることで、注目度がアッ