Webサイトでよく使うアニメーションパターン96種を、CSS実装例とClaudeへの指示テンプレートつきでまとめたリファレンス。「あの動き、なんて言えばいいんだっけ」をなくすチートシート。
スクロール連動・出現・ホバー — Webアニメーションの「呼び方」と実装テクニック・主要ライブラリを総整理。「あの動き、なんて言えばいいんだっけ」をなくす早見表。
| Scroll-triggered Animation | スクロール連動アニメーション。要素がビューポートに入った瞬間に発火する系の総称 |
| Reveal Animation | 出現アニメーション全般（フェードイン・スライドイン・ワイプなど） |
| On-scroll Animation | スクロール系の総称（Awwwards・受賞系サイトでよく使われる呼び方） |
| Viewport-based Animation | ビューポート判定で発火するアニメ。Intersection Observer 前提 |
| Text Wipe Reveal / Clip-path Text Reveal / Mask Reveal / Color Swap Reveal | 文字が左→右にワイプしながら色が変わる（CrowdLoan careers / Awwwards 系の代表） |
| Slide-up Text Reveal / Marquee Reveal | 文字が下から滑り上がる（行ごとにマスクして上下シフト） |
| Ken Burns Effect / Image Scale Reveal / Zoom-out Fade | 画像がズームしながらフェードイン（ドキュメンタリー映画の名手 Ken Burns に由来） |
| Split Text Animation / Letter-by-letter Reveal | 1文字ずつ順番に出現させる |
| Scroll-linked Animation / Scrubbed Animation | スクロール量で連続的に変化（位置・回転・スケールが指の動きに直接追従） |
| Parallax | 背景と前景がスクロール速度差で動く立体感 |
| Intersection Observer API | 要素のビューポート入退場を検知。reveal 系アニメの核となるブラウザ標準 API |
| CSS clip-path animation | 多角形（polygon）やインセットを動かしてマスク表示。ワイプ系の定番 |
| CSS mask | clip-path の上位互換、グラデーションマスクも可能 |
| CSS transform / transition | scale / translate / opacity の組合せ。最も軽量 |
| Web Animations API (WAAPI) | JS で element.animate() を呼ぶブラウザ標準 API |
| CSS scroll-driven animation | 2024年から主要ブラウザ対応。animation-timeline: scroll() でスクロール量に直接 bind |
| GSAP + ScrollTrigger | Awwwards 系の代表格。複雑なタイムライン・スクラブ・ピン留めが組める |
| Lenis | 滑らかなスムーズスクロール（OSのデフォルトより慣性が効く。ref. CrowdLoan 系もこれ使用が多い） |
| Locomotive Scroll | スクロール検知＋パララックス |
| AOS (Animate On Scroll) | data-aos 属性だけで実装できる軽量版 |
| Framer Motion | React 用、scroll連動アニメ得意 |
| Motion One | GSAP より軽量、WAAPI ベース、5kb |
| Splitting.js | 文字を span にバラして 1文字ずつアニメに使う前処理 |
| Editorial Web Animation | 雑誌的・編集的な Web アニメ全般。Awwwards 受賞サイト系の総称 |
| Awwwards-style scroll reveal | 同上。GSAP + Lenis 構成が定番 |
| Liquid swap / Morph reveal | 滑らかに色や形が変化する（液体的） |
| Microinteraction | クリック・ホバーなど小さな反応アニメ（Dan Saffer の定義） |
要素が画面に現れる時の動き。ページロード、スクロールイン、モーダル表示などで使う。
ユーザーの注意を引きたい時に使う動き。エラー表示、CTA強調、通知などに。
ループし続ける動き。ローディング、装飾、プレースホルダーに使う。
要素が消える時の動き。トーストの消去、ページ遷移、要素削除に。
見出しやコピーを印象的に見せる文字のアニメーション。ヒーロー、CTA、強調したい部分で使う。
特殊な動きや組み合わせ系。場面に応じて使い分けるバリエーション。
マウスオーバー時の動き。ボタン、カード、画像で使う。下のデモは自動再生。
複数要素を時差で順次アニメーションさせる手法。リスト、ナビ、ヒーロー要素で頻出。
同じ移動距離でも、加速・減速の違いで印象が大きく変わる。下のドットで動きを比較。
アニメーションを実装する時のClaudeへの指示テンプレート。
[要素] に [アニメーション名] を追加。 duration: [時間], easing: [曲線], [ループする/1回だけ]、 [ホバーで発動 / スクロールで発動 / 自動]
[複数要素] を [アニメーション名] で 順次表示。各要素 [秒数] ずつ遅延、 全体で [時間] かけて完了。 GSAPなら stagger: 0.1 を使う。
[要素] がビューポートに入ったら [アニメーション名] を1回実行。 Intersection Observerで監視、 threshold: 0.2、once: true。
[要素] に [アニメーション] を、 easingは [linear/ease-in/snap/back等]、 動きの感じは [機敏に/ふんわり/重厚に]、 duration [秒数]。
[要素A] が [動き] した後、 [要素B] が [動き]、 最後に [要素C] が [動き]。 GSAP timelineまたはanimation-delayで連鎖。
[GSAP / Framer Motion / Motion One / CSS only / Lottie] で実装して。 [要素] に [動き]、 [ライブラリ特有の機能]を活用。
UIアニメーションを上手く使うための実践的なポイント。
UIアニメーションの基本デュレーションは 200-400ms。短いと動きがわからず、長いと待たされる。出現は 300ms、退場は 200ms が目安。
要素が画面に入る時(出現)はほぼ全て ease-out。止まる前に減速するので自然。出る時(退場)はease-inで加速して消える。
パフォーマンスのため transform と opacity 中心で動かす。width, height, top, left はGPU使えず重い。
動かしたいから動かす、ではなく「機能のため」が原則。アニメーションを多用しすぎると安っぽく見える。注意を引きたい1〜2箇所に絞る。
OS設定で動きを抑えるユーザーがいる。@media (prefers-reduced-motion: reduce) でアニメを無効化または短縮する配慮を。
複数要素を時差で動かす時、各要素の遅延は 50-150ms。短すぎると一斉、長すぎると遅く感じる。100msがデフォルト。