transitions.dev

Why we included this project

Transitions.dev collects the CSS transitions that keep showing up in real web apps: card resizes, modal open and close, menu dropdowns, notification badges, error shakes. Each pattern is demonstrated live on the site and comes as a self-contained CSS snippet with semantic custom properties, namespaced classes, and a prefers-reduced-motion guard, so you can paste it into any project without dragging in demo markup. A CLI pulls transitions straight into your project from the terminal, and the same recipes are packaged as an installable skill that AI coding tools like Cursor, Claude Code, and Codex can apply directly. The companion Refine tool injects a live panel into a running app and asks your coding agent to align or replace the selected motion with the library's tokens. If you want consistent, polished UI motion without hand-rolling keyframes, this is a fast starting point, and the agent-skill packaging makes it easy to hand motion work off to coding assistants.