# Transitions Dev

Production-ready CSS transitions for web apps.

- Repository: https://github.com/Jakubantalik/transitions.dev (6007 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-29
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Jakubantalik/transitions.dev --skill transitions-dev -g -a claude-code -y`
Codex: `npx skills add Jakubantalik/transitions.dev --skill transitions-dev -g -a codex -y`
Cursor: `npx skills add Jakubantalik/transitions.dev --skill transitions-dev -g -a cursor -y`
Gemini CLI: `npx skills add Jakubantalik/transitions.dev --skill transitions-dev -g -a gemini-cli -y`

## Description

Production-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swaps, icon swaps, success checks, avatar group hovers, error state shakes, search/input clear, skeleton loaders, shimmer text, sliding tabs, tooltips, staggered text reveals, card hover tilt, plus-to-menu morph, accordions, toasts, like buttons, learn-more hovers, checkbox checks, spinning counters, toggles, AI thinking states, reasoning streams, streaming text, matrix dot loaders, or banner stacking. Triggers on "add a transition", "animate the dropdown", "make the modal open smoothly", "swap icon", "page slide", "stagger animation", "open / close transition", "make it animate", "fade between", "success animation", "form error", "shake on invalid", "hover lift", "avatar stack hover", "clear the search", "skeleton loader", "loading shimmer", "shimmer text", "sliding tabs", "segmented control", "tooltip", "reveal text", "tilt card", "3D hover tilt", "cursor glare", "plus to menu", "FAB morph", "accordion", "collapsible", "expand / collapse", "disclosure", "toast", "snackbar", "like button", "heart animation", "learn more arrow", "checkbox", "check animation", "spinning counter", "odometer", "slot machine digits", "toggle", "switch", "thinking states", "AI status line", "agent reasoning", "reasoning stream", "streaming text", "stream words in", "matrix loader", "dot loader", "banner stack", "stacked toa

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Transitions.dev

Thirty-two portable CSS transitions, each namespaced under `t-*` selectors with semantic CSS custom properties. Drop-in: paste the snippet, wire the documented HTML hooks, done. No framework dependencies, no demo-specific markup, and every snippet ships a `prefers-reduced-motion` guard.

## Quick reference

The rest: https://github.com/Jakubantalik/transitions.dev/blob/HEAD/skills/transitions-dev/SKILL.md