jakubantalik/transitions.dev
Developer toolsこのページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る
ウェブアプリに不可欠なトランジション、エージェント向けのスキル、エージェント向けのRefineツールのコレクション
概要
Transitions.dev は再利用可能なCSSトランジションのインタラクティブなコレクションです。インデックスページの各カードは異なるインタラクションパターンを示し、それぞれにコピー可能なポータブルCSSスニペットを送ります。 各カードにはコピーボタンがあり、そこから独立したCSSスニペットを出力します。:root上のセマンティックCSSカスタムプロパティ、t-*クラスのネームスペースに表示された遷移ルール、そして@media(優先-reduced-motion: reduce)ガードが付与されます。これにより、スニペットを任意のプロジェクトに貼り付け、デモ特有のマークアップやサイズを入力せずに任意のコンポーネントに適用できます。 同じ18のトランジションはインストール可能なエージェントスキルとしてパッケージ化されており、AIコーディングツール(Cursor、Claude Code、Codexなど)がプロジェクト内で直接適用できます。 スキルソースはskills/transitions-dev/ — SKILL.md、18個のトランジションごとの参照ファイル(01-card-resize.md...18-texts-reveal.md)、そして_root.css(独自のユニバーサルインストールブロック)に存在します。 スキルはインデックスから生成されます。
概要（AI 翻訳）
Transitions.dev は再利用可能なCSSトランジションのインタラクティブなコレクションです。インデックスページの各カードは異なるインタラクションパターンを示し、それぞれにコピー可能なポータブルCSSスニペットを送ります。
ライブサイト:https://transitions.dev/
トランジション
| # | 名前 | 表示されているもの |
|---|---|---|
| 1 | カードのサイズ変更 | スムーズなカードサイズ変更の遷移。 |
| 2 | 数字のポップイン | ブラーとスタッガーを伴う指のフリップ。 |
| 3 | 通知バッジ | 斜めスライド、スプリングがポップイン。 |
| 4 | テキスト状態の入れ替え | テキストの切り替えとぼかし。 |
| 5 | メニュードロップダウン | オリジン認識型の開閉トランジション。 |
| 6 | モーダルオープン/クローズスケールを伴うモーダル遷移。 | |
| 7 | パネル公開 | パネルの開閉トランジション。 |
| 8 | ページを並べて | ページ/ページへの移行。 |
| 9 | アイコン交換 | スケール&ブラーアイコン交換。 |
| 10 | 成功チェック | フェード、回転、ぼかし、Yボブ、SVGパス描画を含む確認アイコン。 |
| 11 | アバターグループホバリング | ホバリングされたアバターが現れ、隣人たちもフォルオフで続きます。 |
| 12 | エラー状態のシェイク | 検証エラー時の入力シェイクと自動中立に戻します。 |
このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。
README
以下は原文 README の抜粋です。原文を見る。
Transitions.dev
Transitions.dev is an interactive collection of reusable CSS transitions. Each card on the index page demonstrates a different interaction pattern and ships a copy-ready, portable CSS snippet for each.
Live site: https://transitions.dev/
Transitions
| # | Name | What it shows |
|---|---|---|
| 1 | Card resize | Smooth card resize transition. |
| 2 | Number pop-in | Digit flip with blur and stagger. |
| 3 | Notification badge | Diagonal slide with spring pop-in. |
| 4 | Text states swap | Text swap transition with blur. |
| 5 | Menu dropdown | Origin-aware open / close transition. |
| 6 | Modal open / close | Modal transition with scale. |
| 7 | Panel reveal | Panel open / close transition. |
| 8 | Page side-by-side | Forward / back page transition. |
| 9 | Icon swap | Scale and blur icon swap. |
| 10 | Success check | Confirmation icon with fade, rotate, blur, Y-bob, and SVG path draw. |
| 11 | Avatar group hover | Hovered avatar springs up while neighbours follow with a falloff. |
| 12 | Error state shake | Input shake on validation error with auto-revert to neutral. |
Each card has a copy button that emits a self-contained CSS snippet: semantic CSS custom properties on :root, the transition rules namespaced under t-* classes, and a @media (prefers-reduced-motion: reduce) guard — so you can paste the snippet into any project and apply it to any component without pulling in demo-specific markup or sizing.
Install with the CLI (npm)
Pull any transition into your project from the terminal — no manual copy:
npx transitions-dev add card-resize # free, no account needed
npx transitions-dev add --free # every free transition at once
npx transitions-dev list # see everything available
Pro transitions unlock after a passwordless browser sign-in (device flow — no API key in your terminal):
npx transitions-dev login # opens the browser to confirm a code
npx transitions-dev add confetti-burst # pulls the Pro CSS + React
CLI source: cli/ (published as the public transitions-dev package; transitions-pro is the old name and forwards to it — it holds no premium source; Pro recipes are fetched from the authenticated API).
Use as an agent skill
The same transitions are packaged as an installable agent skill so AI coding tools (Cursor, Claude Code, Codex, …) can apply them directly inside your project.
npx skills add Jakubantalik/transitions.dev
Skill source lives in skills/transitions-dev/ — SKILL.md, eighteen per-transition reference files (01-card-resize.md … 18-texts-reveal.md), and _root.css (the universal install block on its own).
推奨ツール
別のキーワードを試すか、フィルタを外してください。
インストール
npx skillfish add jakubantalik/transitions.dev