transitions-dev

transitions-dev is a library of twelve production-ready, framework-agnostic CSS transitions for web interfaces. It solves the recurring problem of hand-crafting polished micro-interactions — notification badges, dropdowns, modals, panel reveals, page slides, card resizes, number pop-ins, text and icon swaps, success checkmarks, avatar-group hovers, and error-state shakes — by providing drop-in snippets that read from a single shared set of semantic CSS custom properties. Each transition is namespaced under `t-*` selectors, carries no framework dependencies or demo-specific markup, and ships with a required `prefers-reduced-motion` guard.

The skill centers on a quick-reference table mapping each transition to when it should be used and its detailed per-transition file, plus decision rules for matching a user's request to the right effect (match the visible UI element first, then the verb) and a rule to prefer the lower-overhead option when two could fit. A universal `:root` block is dropped into a project once, and every snippet reads tunable values (durations, easings, distances, blur) from those semantic names. Each per-transition file documents the HTML hooks, tunable variables, the CSS keyframes, and any JavaScript orchestration needed to replay the animation.

Target users are frontend developers and designers who want consistent, accessible, copy-paste animations without adopting an animation framework. Typical use cases include adding a smooth modal open/close, animating a dropdown from its trigger, popping a notification badge, celebrating a completed action with a success check, or shaking a form field on validation error.