Transitions.dev — Essential transitions for web apps

Webアプリ向けに定番のトランジションを集めたサイト。CSSとReactのコードがコピー＆ペーストで使える。Jakub Antalik 運営。

Summary

Webアプリで使う定番トランジションを集めたコード集。Jakub Antalikが運営している。CSSとReactの両方の実装がコピー＆ペーストで取り出せる。

掲載されているトランジション:

共通しているのは「essential」と銘打って、迷わず採用できる粒度に絞っている点。GitHubとXのリンクから本人にたどれる。

URL: https://transitions.dev/DATE: 2026年4月29日

関連リソース

珍しいアニメーション付きReactコンポーネントの無料・オープンソースなレジストリ。Tailwind CSS、Motion、shadcn CLIで作られていて、コピペして自分のコードにできる。

サイト、Webアプリ、モバイル、コンポーネント、フローのデザインチェックリスト集。細部まで確認して、より良いものを出す。

クリック直後の0.5秒を扱うReact向けマイクロインタラクション集。54個のコンポーネントを、部品の種類ではなく人が何の最中かで10セクションに分類。ソースをコピーして使い、依存はmotionだけ。

デザインのScopeを、
もっと広げよう。

noteメンバーシップで、デザインの深掘り記事を毎週配信。

チームへのデザイン導入・研修もご相談ください。