transitions.devとは｜UIの動きをCSSで配り、AIエージェントにも使わせるモーション集

transitions.dev は、モーダルの開閉・ドロップダウン・タブの切り替え・成功のチェックマークといった UI の動きを、コピーして使える CSS にまとめたモーション集です。作者はデザイナーの Jakub Antalik 氏で、GitHub のスターは約6.2k（2026-11-10）です。同じ遷移を Claude Code や Cursor に渡す「エージェントスキル」としても配っているのが特徴で、AI に UI を作らせたときの動きを揃える道具になっています。

Jakub Antalik 氏による transitions.dev の紹介

UI の部品と見た目の決まりごとを揃える考え方は デザインシステムとは？仕組み・構成要素・有名事例をエンジニア向けに整理する【2026年版】 にまとめています。

transitions.dev とは——コピーして使える UI の遷移集

README によれば、transitions.dev は「再利用できる CSS 遷移の、触って試せるコレクション」です。サイトの各カードに遷移の実演とコピーボタンがあり、押すと次の3つが入った CSS が手に入ります。

• 時間・イージング・距離などを名前つきで持つ :root の CSS 変数
• t-resize のように t- で始まるクラスに閉じた遷移のルール
• @media (prefers-reduced-motion: reduce) の分岐

デモ用のマークアップや大きさは含まないので、どのプロジェクトのどの部品にも貼れる、という作りです。カードのリサイズなら、要はこれだけです。

:root {
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-resize {
  transition:
    width  var(--resize-dur) var(--resize-ease),
    height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}
@media (prefers-reduced-motion: reduce) {
  .t-resize { transition: none !important; }
}

README の本文は「18個の遷移」と書いていますが、今のスキルには36個の参照ファイルがあり、About には「43以上」とあります。数は増え続けているので、手元に入れた版で確かめるのが確実です。AI の思考中の表示（thinking states）やストリーミングの文字表示など、AI 製品向けの遷移も入っています。

エージェントに使わせる——スキルと Refine

transitions.dev が単なる CSS 集と違うのは、AI のコーディングエージェントに渡す前提で作られている点です。スキルは次のコマンドで入れます（README の記載で、当サイトでは実行していません）。

npx skills add Jakubantalik/transitions.dev

入るのは SKILL.md と遷移ごとの参照ファイル、共通の _root.css です。SKILL.md の説明には「ドロップダウンを動かして」「モーダルを滑らかに開いて」「スケルトンローダー」といった言い方が発火の条件として並んでいて、エージェントはそれを見て該当する参照ファイルを読み、決まった値で遷移を書きます。「ハードコードされた時間をモーショントークンに置き換えて」という頼み方にも対応しています。同じコマンドで、UI を「AI が生成しているように見せる」演出のスキル transitions-ui-generation も入ります。

CLI でプロジェクトに直接取り込むこともできます。

npx transitions-dev add card-resize    # 無料・アカウント不要
npx transitions-dev add --free         # 無料の遷移をまとめて
npx transitions-dev login              # Pro はブラウザでログイン（デバイスフロー）

Pro の遷移は、ブラウザでコードを確かめるログイン（ターミナルに API キーを置かない方式）のあと、認証つきの API から取得されます。公開の CLI パッケージには Pro の中身は入っていない、と README は説明しています。

Refine は、動いているアプリに時間軸と Refine のパネルを差し込み、選んだ遷移をエージェントに transitions.dev のモーショントークンへ揃えさせる道具です。npx transitions-refine live で、アプリのページに <script> タグを差し込み、ローカルの中継サーバを立てます。--llm を付けると Cursor の CLI を入れて配線までする、と README にあります。開発中のアプリのコードに手を入れる道具なので、使い終わったら npx transitions-refine stop で差し込んだタグを外すことと、--llm が何を入れるかを先に確かめることを勧めます。

transitions.dev のライセンス——MIT ではない

リポジトリの LICENSE は「Transitions.dev License」という独自のもので、2種類に分かれています。

• 遷移とスキル：個人・商用を問わず何件の製品にも使え、書き換えて利用者に配信できます。遷移集そのもの（またはその大部分）を、競合のライブラリ・モーションパック・アニメキットとして再配布・販売することは禁止です。
• ツール（CLI・エージェント・Refine）：MIT です。

無料の遷移とスキルは、会社でもプランなしで使えます。Pro の遷移と有料のエージェント機能は、個人なら Pro、会社やチームで使うなら1人でも Business が必要です。販売するテンプレートやテーマに遷移を入れるのは、有料プランで、遷移が主役でないなどの条件を満たす場合に限られます。

動きを減らす設定は効くか——実測

各遷移の CSS には prefers-reduced-motion: reduce の分岐があり、スキルの参照ファイルにも「この分岐は必須、残すこと」と書かれています。カードのリサイズの CSS をそのまま貼ったテストページを作り、Playwright で OS の「動きを減らす」設定を切り替えて、幅を 200px から 400px に変えたときの動きを測りました。

動きを減らす設定の利用者には、遷移が止まって結果だけが出ることを確かめられました。エージェントにスキルを使わせる場合も、この分岐が消されていないかはコードレビューで見ておくと安心です。AI に UI の作法を守らせるスキルの効き方は Refactoring UIの原則をClaude Codeに守らせるスキル｜実測すると発火しない条件がある でも確かめています。デザインシステム側をエージェント向けにした例は Astryxとは｜Metaのデザインシステムが「agent ready」を毎晩shadcn/uiと採点比較している を参照してください。

参照ソース

• Jakubantalik/transitions.dev（GitHub） — README・LICENSE・skills/・cli/（HEAD 2026-11-08、2026-11-10 確認）
• transitions.dev ・利用規約
• Jakub Antalik 氏の X の投稿