Community画像github.com

Transitions.dev

プロダクション準備完了のCSSトランジション集。通知バッジ、ドロップダウン、モーダル、パネル表示、ページトランジション、カードリサイズ、数字ポップイン、テキスト差し替え、アイコン差し替え、成功チェック、アバターグループホバー、エラーシェイクを実装する際に使用します。

Transitions.dev とは？

Transitions.dev は、12 個の移植可能な CSS トランジションを提供する AI エージェントスキルです。各トランジションは `t-*` セレクタとセマンティック CSS カスタムプロパティで名前空間化されており、フレームワークに依存せず、スニペットを貼り付け、ドキュメント化された HTML フックを接続するだけで即座に利用できます。このスキルは、`transitions reveal`（全トランジション一覧表示）、`transitions review`（プロジェクトのアニメーション監査）、`transitions apply`（最適なトランジションのインストール）という3つのコマンドを提供し、Claude Code, Cursor, Codex などの AI エージェントがユーザーの要求に応じて適切なトランジションを選択・実装できるように設計されています。すべてのスニペットには `prefers-reduced-motion` ガードが含まれており、アクセシビリティに配慮されています。Universal Install ブロックを一度プロジェクトに追加すれば、すべてのスニペットはそのセマンティック変数を参照するため、個別の値を追跡する必要がありません。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/ElvinEga/skills/tree/HEAD/skills/animation/transitions-dev

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

Transitions.dev は何をしますか？

12 個の移植可能な CSS トランジション。それぞれ t-* セレクタとセマンティックな CSS カスタムプロパティで名前空間化されています。スニペットを貼り付け、ドキュメント化された HTML フックを接続するだけです。フレームワークの依存関係は不要で、デモ固有のマークアップもなく、すべてのスニペットには prefers-reduced-motion ガードが含まれています。

クイックリファレンス

トランジション使用タイミングリファレンス
カードリサイズコンテナのレイアウト状態が変化したときに、幅または高さをトゥイーンします。01-card-resize.md
数字ポップイン数字が更新されたときに、ぼかしスライドを伴って各数字を再表示します。02-number-pop-in.md
通知バッジトリガー上に小さなバッジをスライドさせ、ドットをポップ表示します。03-notification-badge.md
テキスト状態差し替えぼかしを伴う上下のトランジションでテキストをその場で差し替えます。04-text-states-swap.md
メニュードロップダウントリガーから成長する、原点を考慮したドロップダウンを開きます。05-menu-dropdown.md
モーダル開閉モーダルダイアログをスケールアップし、閉じるときはよりソフトなスケールダウンを行います。06-modal.md
パネル表示クロスぼかしを伴ってパネルを領域にスライドインします。07-panel-reveal.md
ページ横並び2つの横並びページ間をスライドします（リスト↔詳細、ステップ1↔ステップ2）。08-page-side-by-side.md
アイコン差し替えぼかしとスケールを伴って、同じスロット内の2つのアイコンをクロスフェードします。09-icon-swap.md
成功チェックフェード＋回転＋Y方向ボブ＋パスストローク描画を合成し、アクション完了を演出します。10-success-check.md
アバターグループホバーアイテム列を距離減衰で浮き上がらせ、戻るときにバネのような弾みをつけます。11-avatar-group-hover.md
エラー状態シェイク区間ごとに3次ベジェ曲線でシェイクし、ボーダーとメッセージを自動的に元に戻します。12-error-state-shake.md

決定ルール

ユーザーがトランジションを要求した場合、最初に可視の UI 要素、次に動詞と照合します。

  • トリガー＋上部に浮かぶ小さなドット → 通知バッジ。
  • トリガー＋そこから成長するサーフェス → ドロップダウン（アンカー付き、原点対応）またはモーダル（中央揃え、アンカーなし）。
  • ページの領域にスライドインするサーフェス → パネル表示。
  • 2つの画面、リスト↔詳細 または ステップ1↔ステップ2 → ページ横並び。
  • 要素の幅または高さが変化する → カードリサイズ。
  • 要素のテキストコンテンツがその場で変化する → テキスト状態差し替え。
  • 同じスロット内の2つのアイコン → アイコン差し替え。
  • 数字が更新される → 数字ポップイン。
  • 確認/成功/'完了'の瞬間（チェックマーク、支払い処理済み、ファイルアップロード完了） → 成功チェック。
  • 水平スタック内のアイテムをホバー（アバター、チップ、セグメントボタン、タグピル） → アバターグループホバー。
  • フォーム検証エラー/'これは間違っている'というフィードバック（無効なフィールド、間違ったPIN、重複した名前） → エラー状態シェイク。
  • 明確な一致なし → transitions reveal にフォールバックし、ユーザーに選択させます。推測しないでください。

2つのトランジションが適合する可能性がある場合は、オーバーヘッドが少ない方を優先します（パネル表示よりカードリサイズ、モーダルよりドロップダウン、フルモーダル演出より成功チェック）。ただし、デザインが明らかに重いサーフェスを必要とする場合はこの限りではありません。成功チェックはアニメーションのみです。スピナーからチェックへの切り替えも必要な場合は、アイコン差し替えと組み合わせてください。

コマンド

このスキルは、直接のトランジション要求に加えて、エージェントが認識すべき3つの名前空間化された動詞を公開します。すべてのコマンドは transitions で始まるため、同じプロジェクトにインストールされている他のスキルの動詞と競合することはありません。

transitions reveal — すべてのトランジションを一覧表示

トリガーフレーズ: transitions reveal, "トランジションを表示", "すべてのトランジションを一覧表示", "このスキルのトランジションは？", "トランジションカタログを表示"。

動作: 12個のトランジションを番号付きプレーンテキストリスト（名前、1行概要、該当リファレンスファイル名）で出力します。上記の ## クイックリファレンス の行を再利用し、新しいコピーを作成しないでください。プロジェクトへのアクセスは不要です。

transitions review — プロジェクトを監査して適合性を確認

トリガーフレーズ: transitions review, "プロジェクトをレビュー", "アニメーションを監査", "どこで transitions.dev が役立つか", "このスキルを使う場所を探す"。

動作:

  1. ワークスペースで次の指標を検索: transition: 宣言、@keyframes、スタイルファイル内のハードコードされた ms / s の長さ、11個の決定ルールパターン（モーダル、ドロップダウン、バッジなど）に一致するコンポーネント。
  2. ヒットごとに決定ルールと照合し、最適なトランジションを1つ選択します。
  3. ファイルごとにグループ化された番号付きリストを出力:
    • path/to/Component.tsx:L42 — ドロップダウンのように見えるため、menu-dropdown (05-menu-dropdown.md) を提案。
    • すでに t-* クラスを使用しているアドホックなトランジションはスキップします。
  4. 何も編集しないでください。「transitions apply を任意の行に対して実行すると、提案されたトランジションをインストールできます。」で終了します。

transitions apply — 最適なトランジションをインストール

トリガーフレーズ: transitions apply, "ここにトランジションを適用", "適切なトランジションを追加", "transitions-dev をここにインストール", "この要素のアニメーションを修正"。

動作:

  1. コンテキストを読み取る: 現在開いているファイル、カーソルに最も近い要素、周囲の CSS / JSX。ユーザーが明示的にトランジションを指定した場合（例: transitions apply menu-dropdown）、それを使用します。
  2. そのコンテキストに対して ## 決定ルール のルールを実行し、1つのトランジションを選択します。2つ適合する可能性がある場合は、オーバーヘッドが少ない方を優先します（既存のルールと同じタイブレーカー）。
  3. 1行の提案を表示: 「ここでは menu-dropdown を適用します。要素がトリガーから開き、アンカーが付いているためです。インストールしますか？」
  4. 確認後、## 出力形式 の既存の5ステップ手順（ルートブロック、スニペット、フック、reduced-motion ガード、必要に応じて JS オーケストレーション）に従います。
  5. エージェントが確信を持って1つのトランジションを選択できない場合は、transitions reveal にフォールバックし、ユーザーに選択を促します。

ユニバーサルインストール

この :root ブロックをプロジェクトに1回ドロップします。すべてのトランジションスニペットはこれらのセマンティック名から読み取ります。後で追跡する必要のあるコンポーネントごとの値はありません。

/* transitions-dev — この :root ブロックをプロジェクトに一度コピーしてください。
   すべてのトランジションスニペットはこれらのセマンティック名から読み取ります。 */
:root {
  /* カードリサイズ */
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 数字ポップイン */
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  /* 通知バッジ */
  --badge-slide-dur: 260ms;
  --badge-pop-dur: 500ms;
  --badge-pop-close-dur: 180ms;
  --badge-fade-dur: 400ms;
  --badge-fade-close-dur: 180ms;
  --badge-blur: 2px;
  --badge-offset-x: -8.2px;
  --badge-offset-y: 12.4px;
  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* テキスト状態差し替え */
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  /* メニュードロップダウン */
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* モーダル開閉 */
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* パネル表示 */
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* ページ横並び */
  --page-slide-dur: 200ms;
  --page-fade-dur: 200ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* アイコン差し替え */
  --icon-swap-dur: 200ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  /* 成功チェック */
  --check-opacity-dur: 550ms;
  --check-rotate-dur: 550ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 450ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 550ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  /* アバターグループホバー */
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.05;
  --avatar-falloff: 0.45;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1);
  /* エラー状態シェイク */
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
}

ライブデモ transitions.dev で使用されている --pX-* ソーストークンは、ここでは意図的にエクスポートしていません。調整可能な値はセマンティック名 (--badge-*, --dropdown-*, --modal-*, …) に名前変更されているため、ユーザーがデザインの語彙を所有できます。

出力形式

ユーザーのプロジェクトにトランジションを挿入する場合:

  1. 上記の :root ブロックをユーザーのグローバルスタイルシートに追加しますが、まだ存在しない場合のみです。ユーザーがすでにユニバーサルインストールブロックを一度インポートしている場合は、重複させないでください。
  2. 選択したトランジションのCSSを該当リファレンスファイルからそのまま貼り付けます。セレクタを書き換えたり、トランジションをショートハンドに圧縮したり、will-change を削除したりしないでください。スニペットは調整済みでテスト済みです。
  3. ドキュメント化されたHTMLフック（クラス名: .t-dropdown, .t-modal, .t-success-check, .t-avatar, .t-input, …）および状態属性（data-open, data-state, data-page, .is-open, .is-closing, .is-exit, .is-enter-start, .is-animating, .is-error, .is-shaking）を接続します。
  4. @media (prefers-reduced-motion: reduce) ブロックを維持します。 すべてのスニペットに含まれています。これを削除すると、アクセシビリティ監査に不合格になります。
  5. JSが必要なトランジション（ドロップダウン、モーダル、テキスト差し替え、数字ポップイン、ページスライド、成功チェック、アバターグループホバー、エラー状態シェイク）については、リファレンスファイルから小さなオーケストレーションスニペットをコピーし、セレクタをユーザーのDOMに適合させます。タイミングの読み取り（getComputedStyle(...)getPropertyValue("--…")）を維持し、:root の値と同期するようにします。

差分は小さく保ってください。トランジションの導入に必要なファイルのみを編集します。ユーザーの既存の変数の名前を変更したり、無関係なCSSを再フォーマットしたり、モーションライブラリを取り込んだりしないでください。

避けるべき一般的な間違い

  • ドロップダウン/モーダルのクローズ状態クラスのクリーンアップを削除すること — .is-closing を削除する setTimeout がないと、次のオープンが静止したオープン前のスケールではなく、クローズ中のスケールから開始されます。
  • テキスト差し替え、数字ポップイン、成功チェックの再再生、エラー状態シェイクでのリフローを忘れること — クラス/属性の削除と再追加の間に void el.offsetWidth（または offsetHeight）を実行することが、アニメーションの再再生を保証します。
  • 内部のピースではなく単一のコンテナをアニメーションすること — バッジの場合はドットをアニメーションし、トリガーはアニメーションしません。ページスライドの場合は、コンテナではなくページセクションをアニメーションします。
  • transition: … を transition: all に置き換えること — すべてのスニペットは意図的に正確なプロパティを列挙しており、無関係なスタイル変更が無料で適用されないようにしています。
  • 成功チェックの stroke-dasharray をハードコードすること — スニペットはプレースホルダーとして 20 を出荷します。ご自身のパスについては、path.getTotalLength() を1切り上げた値に置き換えてください。そうしないと、ストロークが事前に表示されたり、過剰に描画されたりします。
  • アバターグループホバーの transition-timing-function をCSSで設定すること — --shift / --scale-active の書き込み前にJSでインライン設定する必要があります。そうすることで、バネのようなイーズアウトが mouseleave 時にのみ適用されます。
  • エラー状態シェイクで .is-error と .is-shaking を1つのクラスに混在させること — これらを直交させておくことで、シェイクの再再生（削除→リフロー→再追加）がエラー全体の処理をちらつかせることなく可能になります。

リファレンスファイル

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

ElvinEga/skills

Build scroll-triggered and scroll-driven animations for websites and landing pages with React + Framer Motion (or the lightweight JOS library for non-React sites). Covers sticky scroll stacks (classic, Chronos cinematic recession, 3D tilt, multi-layer, horizontal), multi-layer parallax, immersive/Apple-style zoom heroes, gallery and product image zoom, 3D image split/shatter reveals, circular/orbital/radial/spiral motion, expanding/bell-curve cards, and canvas or video scrollytelling image sequences. Trigger this whenever the user asks to add ANY kind of scroll animation, scroll effect, scroll-triggered reveal, parallax, sticky section, or scrollytelling to a site or landing page — even if they don't name a specific effect (e.g. "make this section feel more alive on scroll", "add some motion as you scroll down"). Also trigger for simple fade/slide-in-on-scroll reveals via the JOS library.

関連スキル

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More 画像 skills