HOME / GUIDES

Webアニメーション解説ガイド一覧

動くデモとコードはエフェクトのページに、なぜそう書くのか・どこで使うのかはガイドにまとめています。はじめての方は「基礎と設計」の上から、作りたい動きが決まっている方は「実装パターン」から、AI に書かせたい方は「AIで実装する」から読んでください。各ガイドから関連するエフェクトのデモへ直接移れます。

BASICS · 基礎と設計 · 7

基礎と設計

アニメーションを入れる理由、CSS と JavaScript の使い分け、体感速度やパフォーマンスへの影響まで。最初に読む順に並べています。

BASICSWebアニメーションとは？基本と効果がわかる完全ガイドWebアニメーションの定義・種類・UX効果・実装方法を体系的に解説。CSS/JS/SVG/Lottieの違いから、ユーザー体験を向上させる実例まで網羅。 BASICSCSSアニメーション入門 — transition と @keyframes の使い分けCSS のtransitionと@keyframesの違い・適切な使い分け・パフォーマンス最適化のコツを実例付きで解説。JS不要で実装できるCSS animationの基礎。 MICROマイクロインタラクション設計 — UX底上げの小さな動きマイクロインタラクションとは、ボタンを押した・保存できた・入力を間違えた といった一つひとつの操作に対する小さな反応のこと。トリガー・ルール・フィードバック・ループの4要素で設計する考え方を、実装コード付きで解説します。 BASICSCSS vs JavaScript アニメーション — 使い分けの基準CSSとJavaScriptのアニメーション、それぞれの得意領域・パフォーマンス特性・使い分けの判断基準を実例付きで解説。 UXWebアニメーションがUXに与える 7つの心理効果Webアニメーションが体験価値に与える効果を解説。注意誘導・状態フィードバック・体感速度・ブランド表現を実例ベースで整理し、使いどころと過剰演出の境目を明示。 PERFORMANCECore Web Vitalsに影響しないアニメーション設計LCP・CLS・INP を悪化させないアニメーション実装のベストプラクティス。transform/opacity の活用、will-change の正しい使い方を解説。 TRENDS2026年Webアニメーショントレンド — 最新10選View Transition API・スクロール駆動アニメーション・3D演出・スケルトンUIなど、2026年に注目すべきWebアニメーショントレンド10選を解説。

PATTERNS · 実装パターンとコピペ集 · 10

実装パターンとコピペ集

ホバー・スクロール・ローディング・テキストなど、場面別の作り方と、そのまま貼れる実装例の一覧です。

HOVERホバーエフェクトの作り方 — 5つの基本パターンホバーエフェクトとは、マウスカーソルを重ねたときに要素が反応する演出のこと。下線が伸びる・浮き上がる・画像がズームする・色が変わる・アイコンが動く の基本5パターンを、そのまま貼れるCSSと、スマートフォンで効かない問題への対処つきで解説します。 SCROLLスクロールアニメーション完全ガイド — IntersectionObserverスクロールに連動して要素を動かすアニメーションの実装方法を解説。IntersectionObserver・GSAP ScrollTrigger・CSS scroll-driven animations の使い分け。 LOADINGローディングUIの設計 — スケルトン・スピナー・プログレスバー読み込み中の体感速度を上げるローディングUIの設計。スケルトンスクリーン・スピナー・プログレスバーの使い分けと実装を解説。 BUTTONボタンアニメーション大全 — ホバー・プレス・CTA演出クリック率を高めるボタンアニメーションの設計と実装。ホバー・プレス・リップル・グラデーション・パルスCTAを実例付きで解説。 CURSORカーソルエフェクトの作り方 — 追従・マグネット・スポットライトクリエイティブサイトで人気のカーソルエフェクト実装ガイド。カスタムカーソル・追従・マグネット・スポットライトを実例付きで解説。 CSSCSSアニメーション コピペで使える実装例12選JavaScript不要、CSSだけで完結するアニメーション実装例を12種類まとめて紹介。ローディング・ホバー・テキスト・ボタンから、そのままコピペして使えるコードを厳選。 LOADINGローディングアニメーション css コピペ集 — 定番7種を比較「ローディングアニメーション css」を探している人向けに、Motion Labが提供する定番のローディングUI7種類を比較つきで紹介。スケルトン・スピナー・プログレスバーをそのままコピペで実装。 HOVERホバーアニメーション css コピペ集 — 11の実装例「ホバー アニメーション css コピペ」で探している人向けに、Motion Labのホバー系エフェクト11種類をコピペしやすい形で紹介。リンク・ボタン・画像それぞれの定番演出を網羅。 TEXTテキストアニメーション css コピペ集 — 厳選13種を用途別に整理「テキストアニメーション css」で探している人向けに、Motion Labのテキスト系エフェクトから厳選した13種類をコピペしやすい形で紹介。見出し・キャッチコピーを目立たせる演出を網羅。 CSSCSSオーロラエフェクトの作り方｜背景・テキスト・ボタン・カード実装4選オーロラのように多色の光がゆらめくCSSエフェクトの実装ガイド。背景・テキスト・ボタン・カードの4パターンを、コピペで使えるコードとAIプロンプト付きで解説。JavaScript不要。

LIBRARIES · ライブラリ · 3

ライブラリ

Tailwind CSS・Framer Motion（Motion）・GSAP を使う場合の書き方です。素の CSS で足りるかの判断材料にもなります。

FRAMERFramer Motion入門 — React アニメーションの定番ライブラリReact で滑らかなアニメーションを実装する定番ライブラリ Framer Motion の基本。whileHover・initial/animate・variants・AnimatePresence・drag を実例付きで解説。 TAILWINDTailwind CSSでアニメーション — animate・transition・group/peerTailwind CSSでアニメーションを実装する主要4パターンを網羅：animate-pulse/ping/spin・transitionによるhover演出・group-hover・peer-checked。全て実例コードと動くデモ付きで解説。 GSAPGSAP ScrollTrigger 完全ガイド — スクロール連動アニメーションGSAP と ScrollTrigger でスクロール連動アニメーションを実装する方法。scrub・pin・start/end・stagger を実例付きで解説。

AI · AIで実装する · 8

AIで実装する

Claude Code・Cursor・GitHub Copilot などに動きを書かせるときの指示の出し方、規約の置き方、動かないときの切り分けです。

AIClaude / Cursor / v0 でアニメーション付きサイトを作る方法Claude・Cursor・v0 などのAIコーディングツールで、Webアニメーションを実装する具体的なプロンプト例と効率化テクニック。 AIClaude Code でWebアニメーションを実装する — 指示の書き方と実例5選Claude Code にWebアニメーションを実装させるための指示（プロンプト）の書き方を解説。対象ファイル明示・受け入れ条件・制約の3原則、CLAUDE.mdへの規約の書き方、実在エフェクト5種のプロンプト全文、つまずきやすい失敗パターン3つ。 AICursor（AIコードエディタ）でCSSアニメーションを実装する — Rules設定とプロンプト実例AIコードエディタ Cursor でCSSアニメーションを実装する手順を解説。プロジェクトRules（.cursorrules）の書き方、@ でファイルを参照させるプロンプトの型、Tab補完とチャットの使い分け、実在エフェクトのプロンプト実例つき。 AICSSアニメーション AIプロンプト例文集 — そのまま使える指示文テンプレCSSアニメーションをAIに実装させるためのプロンプト例文集。汎用テンプレートと、ホバー・スクロール・テキスト・ローディングなど12カテゴリ別の指示文を、実在するエフェクトの実装例へのリンク付きでまとめました。 AICLAUDE.md / .cursorrules に書くアニメーション規約テンプレート【コピペ可】AIコーディングツールに常時読ませる規約ファイル（CLAUDE.md / .cursorrules）に書くべきアニメーション規約のテンプレート。動かしてよいプロパティ・duration・アクセシビリティ・受け入れ条件をまとめた全文をコピーして使えます。 AIGitHub Copilot でCSSアニメーションを実装する — 補完・Chat・Edits の使い分けGitHub Copilot でWebアニメーションを実装する方法を解説。インライン補完・Chat・Edits の3つのモードの使い分け、.github/copilot-instructions.md への規約の書き方、プロンプトファイルの活用、補完主体のツール特有の失敗パターンと対処。 AIAIが書いたアニメーションが動かないとき — 原因7分類と切り分けの手順AIが生成したCSS/JSアニメーションが動かない原因を7つに分類し、上から順に潰す切り分け手順を解説。transitionの置き場所・animation-name不一致・duration未指定・display:none・初期値の欠落・transformの上書き・要素が存在しないタイミングでの参照。最小再現の作り方つき。 AIAIコーディングツール比較：アニメーション実装で何が違うか — 4ツールを同条件で検証Claude Code / Cursor / GitHub Copilot / v0 をアニメーション実装の観点で比較。同じ条件のプロンプトを渡したときに何が変わるか、規約ファイルの効き方、得意な粒度、選ぶ基準を整理。実装の手順そのものは各ツール別ガイドへ。

エフェクトをカテゴリで探す

テキストアニメーション ホバーエフェクト スクロールアニメーション マイクロインタラクション カードアニメーション 背景アニメーション ボタンアニメーション ローディングアニメーション トランジション・画面遷移 モーダル・ドロワー SVGアニメーション カーソルエフェクト

技術別（CSS / JS / Tailwind / Framer Motion / GSAP）で絞り込むなら カタログ一覧 へ。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 マイクロインタラクション ―UI/UXデザインの神が宿る細部 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスクPR

📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

CREATOR TOOLS · スクール（PR）

🎬 Adobe Creative Cloud — After Effects / Photoshop 業界標準ツール → 💻 SkillHacks — プログラミング・動画編集オンラインスクール → 🚀 デイトラ — Web制作スクール・実案件レベルまで習得 →

※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。