CSSアニメーション AIプロンプト例文集 — そのまま使える指示文テンプレ

まず覚える汎用テンプレート

どのカテゴリでも共通で使える骨格です。埋める場所は4つだけ。対象ファイル、実装内容、使う技術、数値。

対象: <ファイルパスをここに書く>

実装内容:
<何を、どの要素に、どう動かすかを2〜3行で>

制約:
- <使う技術（CSS のみ / Vanilla JS / GSAP など）>
- 動かすのは transform と opacity のみ
- prefers-reduced-motion: reduce で無効化する

受け入れ条件:
- reduce 設定でアニメーションが止まる
- コンソールエラーがゼロ
- レイアウトシフトがゼロ

受け入れ条件の3行はそのまま固定で構いません。prefers-reduced-motion 対応・コンソールエラーゼロ・レイアウトシフトゼロは、どんなアニメーションにも当てはまる最低条件です。この3行があるだけで出戻りが目に見えて減ります。

HOVER — ホバー演出

指定すべき数値は移動距離・duration・イージングの3つ。「浮き上がる」だけでは 2px か 8px かが決まりません。margin ではなく transform: translateY で動かすことを制約に入れます。

実装例：Magnetic Hover、Tilt 3D Hover、Spotlight Hover、Underline Slide Hover

SCROLL — スクロール連動

「いつ発火するか」を必ず数値で書きます。ビューポートに何%入ったら、何px手前から。実装手段は IntersectionObserver と指定し、scroll イベントでの毎フレーム処理を禁じます。戻りスクロールで消える／消えないの挙動も明記します。

実装例：Scroll Trigger、GSAP Scroll Reveal、Parallax Scroll、Sticky Sections

TEXT — テキストアニメーション

1文字ずつ動かす場合は、分割方法とスペースの扱いを指定します。指定しないと単語が改行位置で分断されます。日本語なら「文字単位で分割し、aria-label に元の文字列を残す」と書くとスクリーンリーダー対応まで入ります。

実装例：Typewriter、Gradient Text、Scramble Text、Word Pull Up

LOADING — ローディング表示

唯一 linear イージングが正解になるカテゴリです。回転や往復は等速のほうが自然に見えます。あわせて「読み込み完了時にどう消えるか」まで書かないと、要素が残り続ける実装になりがちです。

実装例：Spinner、Skeleton Loader、Progress Ring、Dots Pulse

TRANSITION — 画面遷移

遷移は出ていく側と入ってくる側の時間差が命です。「前の画面を 200ms でフェードアウト、100ms 待ってから次を 300ms でフェードイン」のように、順序と待ち時間を書きます。書かないと両方が同時に animate して一瞬白くなります。

実装例：Page Fade Transition、View Transition API、Curtain Reveal、Zoom Blur Transition

MICRO — マイクロインタラクション

操作に対する反応なので、速さが正義です。120〜240ms を明示します。加えて「押している間」「離した後」「無効状態」の3つの状態を書き分けさせると、実務で使える品質になります。

実装例：Toggle Switch、Like Burst、Checkbox Animation、Star Rating

CURSOR — カーソル追従

パフォーマンス制約が最重要のカテゴリです。「mousemove のリスナは document に1つだけ」「座標の反映は requestAnimationFrame 内で」「タッチデバイスでは無効化」の3点を必ず制約に入れます。

実装例：Custom Cursor、Cursor Trail、Cursor Glow Follow、Cursor Spotlight Reveal

BUTTON — ボタン演出

クリック可能に見えることが目的なので、ホバーと押下を必ずセットで頼みます。片方だけだと「動くけど押した気がしない」ボタンになります。フォーカスリングを消させない一文も入れておくとキーボード操作が壊れません。

実装例：Ripple Effect、Shine Sweep、Liquid Button、Button 3D Press

CARD — カード表現

カードは並ぶものなので、1枚の指定とグリッド全体の指定を分けて書きます。ホバーで拡大させる場合は「隣接カードを押しのけない（transform のみ）」を制約に入れます。

実装例：Glassmorphism Card、Border Beam、Bento Grid、Card Spotlight

MODAL — モーダル・ドロワー

見た目より挙動の指定が要ります。背景スクロールの固定、Esc キーで閉じる、開いた時のフォーカス移動、閉じた時のフォーカス復帰。この4つを受け入れ条件に書くと、実務で差し戻されないモーダルになります。

実装例：Modal Fade、Modal Scale Blur、Slide Drawer、Bottom Sheet

BACKGROUND — 背景演出

前面のテキストが読めることが最優先です。「コントラスト比 4.5:1 を下回らない」を受け入れ条件に入れます。また filter: blur() の値そのものをアニメーションさせない制約も必須。重さの主因になります。

実装例：Aurora Background、Mesh Gradient、Particle Field、Animated Grid Background

SVG — SVGアニメーション

stroke-dasharray を使う線描画では、パスの全長を実測して渡すか、JS で getTotalLength() を使わせます。決め打ちの数値だと図形を変えた瞬間に崩れます。viewBox を変更させないことも制約に入れます。

実装例：SVG Line Draw、SVG Signature Draw、SVG Gauge、Wave Divider

各エフェクトページには専用プロンプトが置いてある

上記は「カテゴリごとに何を書くか」の指針です。実際に使うときは、エフェクト一覧 から目的の動きを選び、詳細ページの AI PROMPT パネルをそのままコピーするのが最短です。全103エフェクトぶん、個別に書き下ろしたプロンプトが置いてあります。

コピーしたプロンプトの冒頭に「対象: <実ファイルのパス>」を1行足せば、そのままエージェントに投げられます。ツール別の使い方は Claude Code 編 と Cursor（AIコードエディタ）編 を参照してください。

制約と受け入れ条件は毎回書かず、リポジトリの規約ファイルへ逃がすのが定石です。コピーして使える全文は CLAUDE.md / .cursorrules 規約テンプレート にあります。