Transitions.dev

Transitions.dev is an open-source showcase of reusable CSS transitions built by Jakub Antalik. Each transition is presented as a live interactive demo with a one-click "copy CSS" button that emits a self-contained, portable snippet ready to drop into any project. The repository has accumulated over 1,400 GitHub stars since its creation.

What It Is

Transitions.dev is a reference library and copy-paste toolkit for UI motion patterns commonly needed in web applications. Rather than a full animation framework, it focuses on a curated set of interaction transitions — things like card resizes, modal open/close, tab pill indicators, skeleton loaders, and error shakes — each implemented as a minimal, dependency-free CSS snippet. The project also ships an installable agent skill so AI coding tools can apply the transitions directly inside a developer's project.

Transition Catalog

The showcase currently includes eighteen named transitions, each demonstrated on its own interactive card:

• Card resize — smooth card resize transition
• Number pop-in — digit flip with blur and stagger
• Notification badge — diagonal slide with spring pop-in
• Text states swap — text swap transition with blur
• Menu dropdown — origin-aware open/close transition
• Modal open/close — modal transition with scale
• Panel reveal — panel open/close transition
• Page side-by-side — forward/back page transition
• Icon swap — scale and blur icon swap
• Success check — confirmation icon with fade, rotate, blur, Y-bob, and SVG path draw
• Avatar group hover — hovered avatar springs up while neighbours follow with a falloff
• Error state shake — input shake on validation error with auto-revert

Each snippet uses semantic CSS custom properties on :root, transition rules namespaced under t-* classes, and a @media (prefers-reduced-motion: reduce) guard.

Agent Skill Integration

The same eighteen transitions are packaged as an installable agent skill, enabling AI coding tools such as Cursor, Claude Code, and Codex to apply them directly inside a project. The skill is installed via:

npx skills add Jakubantalik/transitions.dev

The skill payload lives in skills/transitions-dev/ and consists of a SKILL.md, eighteen per-transition reference files, and a universal _root.css block. A build script (build/extract.mjs) regenerates the skill files from index.html so the snippets always stay in sync with the live showcase.

Motion Tokens Playground

Beyond the transition cards, the site includes a Motion Tokens section with interactive controls for the five core animation primitives — Duration, Easing, Distance, Blur, and Scale — letting developers tune and preview the underlying variables before copying them into a project.

Architecture and Deployment

The project is a static HTML site with no build step required for local development; running python3 -m http.server 8765 is sufficient. The main files are index.html (showcase), prototypes.html (live tuning playground), skill.html (agent skill landing page), and example.html (a side-by-side "generic AI output vs. with Transitions.dev skill" modal demo). The repository is hosted on GitHub and the live site is served at transitions.dev.