Cursor（AIコードエディタ）でCSSアニメーションを実装する — Rules設定とプロンプト実例

Cursor（AIコードエディタ）とカーソル演出は別テーマ

検索すると混ざりやすいので最初に整理します。Cursorは AI 補完を組み込んだコードエディタの製品名です。一方カーソルエフェクトは、マウスポインタを独自のドットに置き換えたり、軌跡を残したりする Web 演出のことです。

このガイドは前者、AIコードエディタとしての Cursor の話です。マウスポインタの演出を実装したい場合は、カーソルエフェクトの作り方 — 追従・マグネット・スポットライト が該当ガイドになります。

Cursor が得意なのは「既存コードに合わせる」実装

Cursor の強みは、開いているリポジトリの文脈を踏まえて書けることです。ゼロから凝ったコンポーネントを作らせるより、既存の CSS 設計に合わせて足す作業で真価が出ます。

たとえば「このカードのホバーを、隣のボタンと同じイージングで揃えて」という指示は、既存ファイルを参照できる Cursor が最も得意とする形です。逆に、参照するものがない状態で「かっこいいヒーローを作って」と頼むと、プロジェクトの設計から浮いたコードが出てきます。

だからプロンプトの前に、参照先を渡す作業が要ります。それが次の2つ、Rules とファイル参照です。

プロジェクトRules にアニメーション規約を置く

Cursor には、リポジトリ単位で AI に常時読ませるルールを置く仕組みがあります。歴史的にはリポジトリ直下の単一ファイル .cursorrules が使われ、現在は .cursor/rules/ 配下に複数ファイルを置く形式も使われています。どちらの形式が推奨かはバージョンによって変わるため、導入時に公式ドキュメントで確認してください。

置く内容は形式によらず同じです。動かしてよいプロパティ、duration とイージングの既定値、prefers-reduced-motion 対応の必須化、出力形式、受け入れ条件。これを一度書いておけば、毎回のプロンプトは「どのファイルに、何を」だけで済みます。

コピーしてそのまま使える全文を CLAUDE.md / .cursorrules 規約テンプレート に用意しています。

プロンプトは「@ でファイルを渡してから」書く

Cursor のチャットでは @ に続けてファイル名を書くと、そのファイルを文脈として渡せます。アニメーションの実装では、直す対象の HTML と CSS を両方渡すのが基本です。片方だけだとクラス名が食い違います。

渡したうえで、本文は次の3ブロックで書きます。実装内容（何を、どの要素に、どう動かすか）、制約（使う技術・禁止事項）、受け入れ条件（完了の定義）。この型は Claude Code でも共通で、Claude Code でWebアニメーションを実装する で詳しく解説しています。

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

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

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

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

実例：ホバーで浮き上がるカードを既存デザインに合わせる

既存プロジェクトに足す、という Cursor らしい使い方の例です。完成形の挙動は Tailwind Group Hover Card や Tilt 3D Hover で確認できます。

「@card.html @card.css カードにホバー時の浮き上がりを追加。translateY(-4px) と枠線のアクセント色化のみ。duration は同ファイル内の既存 transition に合わせる。新しい CSS 変数を追加しない。prefers-reduced-motion: reduce では transition を無効化する。受け入れ条件：reduce 設定で動かない・レイアウトシフトゼロ・コンソールエラーゼロ」

ポイントは「同ファイル内の既存 transition に合わせる」の一文です。数値を決め打ちせず既存に寄せさせると、サイト全体の統一感が崩れません。

Tab補完とチャットの使い分け

Tab補完が向く作業 — @keyframes の中身、ベンダープレフィックス、似たセレクタの横展開。すでに1つ書いてあるものを増やす作業は補完が速いです。

チャットが向く作業 — 新しい挙動の実装、複数ファイルにまたがる変更、既存コードの読み解き。

アニメーションは「1つ書いて、似たものを横に増やす」構造になりやすいので、最初の1つをチャットで丁寧に作り、残りを補完で増やすのが効率的です。

Cursor で起きやすいつまずき

React 前提のコードが返る — 静的サイトを触っているのに JSX が出てくることがあります。Rules に「対象は静的な HTML / CSS / Vanilla JS」と明記して閉じます。

関係ないファイルまで整形される — 「変更してよいのは指示されたファイルのみ」を Rules に入れておきます。差分が巨大になったら適用せず、範囲を絞って指示し直すほうが速いです。

prefers-reduced-motion が抜ける — 指示しない限りほぼ入りません。Rules に必須化として書くのが唯一の確実な対処です。

あわせて読みたい

Claude Code でWebアニメーションを実装する — 指示の3原則と実プロンプト5選

CSSアニメーション AIプロンプト例文集 — カテゴリ別の指示文テンプレ

CLAUDE.md / .cursorrules 規約テンプレート — コピペできる規約全文

カーソルエフェクトの作り方 — マウスポインタ演出の実装（別テーマ）