サンプル付コピペOK!すごいCSSアニメーションライブラリ30選【2022年版】

 

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

 

現役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アニメーション

CSS Wand

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

css-wand

 

 

CSS Animo

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

css-animo

 

 

CSS Buttons App

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

CSSボタン500個超!コピペで簡単にボタンを生成できる便利サービスまとめ

 

 

画像、背景向け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

 

 

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

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

【保存版】ユーザーを魅了する!UXデザインの正しいアニメーション完全ガイド

 

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

WebアニメーションはLottieがオススメ!基本の使い方完全ガイド【2020年版】

 

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

ディズニー直伝!Webデザインでアニメーションの基本原理を応用する方法

ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基本原則を完全再現!

 

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

ウェブデザイナーが試したい、Webアニメーション無料プラグイン&ライブラリ75個まとめ【保存版】

 

Motion One

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

 

 

Atropos JS

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

 

 

Web Animation Course

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

 

 

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

Web注目のアニメーション!表現力アップの動くデザインアイデア50個まとめ

動きすごっ!最新Webアニメーション、UIインタラクション34個まとめ【参考サンプル集】

サイトの印象は「動き」が決め手!参考にしたいWebアニメーション45個まとめ