transitions-dev

Name: transitions-dev
Author: Jakubantalik

6.3kinstalls91forks

How to install transitions-dev?

jakubantalik/transitions.dev/transitions-dev

$npx -y skills add Jakubantalik/transitions.dev --skill transitions-dev

Installs into the current project.

Summary

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, skeleto

Files · 1

View on GitHub

SKILL.md

1	# Transitions.dev
2
3	Twenty-one 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.
4
5	## Quick reference
6
7	\| Transition \| When to use \| Reference \|
8	\| --- \| --- \| --- \|
9	\| Card resize \| Tween a container's width or height when its layout state changes. \| [01-card-resize.md](./01-card-resize.md) \|
10	\| Number pop-in \| Re-enter each digit with a blurred slide when a number updates. \| [02-number-pop-in.md](./02-number-pop-in.md) \|
11	\| Notification badge \| Slide a small badge onto a trigger and pop the dot. \| [03-notification-badge.md](./03-notification-badge.md) \|
12	\| Text states swap \| Swap text in place with a blurred up-and-down transition. \| [04-text-states-swap.md](./04-text-states-swap.md) \|
13	\| Menu dropdown \| Open an origin-aware dropdown that grows from its trigger. \| [05-menu-dropdown.md](./05-menu-dropdown.md) \|
14	\| Modal open / close \| Scale-up modal dialog with a softer scale-down on close. \| [06-modal.md](./06-modal.md) \|
15	\| Panel reveal \| Slide a panel into a region with a cross-blur. \| [07-panel-reveal.md](./07-panel-reveal.md) \|
16	\| Page side-by-side \| Slide between two side-by-side pages (list ↔ detail, step 1 ↔ step 2). \| [08-page-side-by-side.md](./08-page-side-by-side.md) \|
17	\| Icon swap \| Cross-fade two icons in the same slot with blur and scale. \| [09-icon-swap.md](./09-icon-swap.md) \|
18	\| Success check \| Compose fade + rotate + Y-bob + path stroke-draw to celebrate a completed action. \| [10-success-check.md](./10-success-check.md) \|
19	\| Avatar group hover \| Distance-falloff lift on a row of items with a bouncy spring on return. \| [11-avatar-group-hover.md](./11-avatar-group-hover.md) \|
20	\| Error state shake \| Per-segment cubic-bezier shake with auto-reverting border + message. \| [12-error-state-shake.md](./12-error-state-shake.md) \|
21	\| Input clear with dissolve \| Fly-out + per-word streak when a text field is cleared. \| [13-input-clear-dissolve.md](./13-input-clear-dissolve.md) \|
22	\| Skeleton loader and reveal \| Pulse a placeholder, then cross-fade + cross-blur to the loaded content. \| [14-skeleton-reveal.md](./14-skeleton-reveal.md) \|
23	\| Shimmer text \| Sweep a highlight band across muted text on a loop (pure CSS). \| [15-shimmer-text.md](./15-shimmer-text.md) \|
24	\| Tabs sliding \| Slide the active pill between tabs in a segmented control. \| [16-tabs-sliding.md](./16-tabs-sliding.md) \|
25	\| Tooltip open/close \| Delayed fade+scale in, instant out (pure CSS). \| [17-tooltip.md](./17-tooltip.md) \|
26	\| Texts reveal \| Staggered blurred rise for stacked text lines, quiet fade out. \| [18-texts-reveal.md](./18-texts-reveal.md) \|
27	\| Card hover tilt \| Tilt a card in 3D toward the pointer with a cursor-tracked glare. \| [19-card-tilt.md](./19-card-tilt.md) \|
28	\| Plus to menu morph \| Morph a circular trigger into the menu / panel it opens. \| [20-plus-menu-morph.md](./20-plus-menu-morph.md) \|
29	\| Accordion expand \| Grow / shrink a panel via grid-rows with a chevron flip. \| [21-accordion.md](./21-accordion.md) \|
30	\| Toast open / close \| Rise a toast from below with fade + cross-blur, slower in than out. \| [22-toast.md](./22-toast.md) \|
31	\| Like button \| Fill a heart with a pop + particle burst on like. \| [23-like-button.md](./23-like-button.md) \|
32	\| Learn more hover \| Slide the chevron and spread its arms into an arrow on hover. \| [24-learn-more-hover.md](./24-learn-more-hover.md) \|
33	\| Checkbox check \| Fill the box, then stroke-draw the checkmark. \| [25-checkbox-check.md](./25-checkbox-check.md) \|
34	\| Spinning counter

People who liked this also viewed

6 picks

Type

transitions-dev

6.3kinstalls91forks

View on GitHub

How to install transitions-dev?

jakubantalik/transitions.dev/transitions-dev

$npx -y skills add Jakubantalik/transitions.dev --skill transitions-dev

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Transitions.dev
2
3	Twenty-one 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.
4
5	## Quick reference
6
7	\| Transition \| When to use \| Reference \|
8	\| --- \| --- \| --- \|
9	\| Card resize \| Tween a container's width or height when its layout state changes. \| [01-card-resize.md](./01-card-resize.md) \|
10	\| Number pop-in \| Re-enter each digit with a blurred slide when a number updates. \| [02-number-pop-in.md](./02-number-pop-in.md) \|
11	\| Notification badge \| Slide a small badge onto a trigger and pop the dot. \| [03-notification-badge.md](./03-notification-badge.md) \|
12	\| Text states swap \| Swap text in place with a blurred up-and-down transition. \| [04-text-states-swap.md](./04-text-states-swap.md) \|
13	\| Menu dropdown \| Open an origin-aware dropdown that grows from its trigger. \| [05-menu-dropdown.md](./05-menu-dropdown.md) \|
14	\| Modal open / close \| Scale-up modal dialog with a softer scale-down on close. \| [06-modal.md](./06-modal.md) \|
15	\| Panel reveal \| Slide a panel into a region with a cross-blur. \| [07-panel-reveal.md](./07-panel-reveal.md) \|
16	\| Page side-by-side \| Slide between two side-by-side pages (list ↔ detail, step 1 ↔ step 2). \| [08-page-side-by-side.md](./08-page-side-by-side.md) \|
17	\| Icon swap \| Cross-fade two icons in the same slot with blur and scale. \| [09-icon-swap.md](./09-icon-swap.md) \|
18	\| Success check \| Compose fade + rotate + Y-bob + path stroke-draw to celebrate a completed action. \| [10-success-check.md](./10-success-check.md) \|
19	\| Avatar group hover \| Distance-falloff lift on a row of items with a bouncy spring on return. \| [11-avatar-group-hover.md](./11-avatar-group-hover.md) \|
20	\| Error state shake \| Per-segment cubic-bezier shake with auto-reverting border + message. \| [12-error-state-shake.md](./12-error-state-shake.md) \|
21	\| Input clear with dissolve \| Fly-out + per-word streak when a text field is cleared. \| [13-input-clear-dissolve.md](./13-input-clear-dissolve.md) \|
22	\| Skeleton loader and reveal \| Pulse a placeholder, then cross-fade + cross-blur to the loaded content. \| [14-skeleton-reveal.md](./14-skeleton-reveal.md) \|
23	\| Shimmer text \| Sweep a highlight band across muted text on a loop (pure CSS). \| [15-shimmer-text.md](./15-shimmer-text.md) \|
24	\| Tabs sliding \| Slide the active pill between tabs in a segmented control. \| [16-tabs-sliding.md](./16-tabs-sliding.md) \|
25	\| Tooltip open/close \| Delayed fade+scale in, instant out (pure CSS). \| [17-tooltip.md](./17-tooltip.md) \|
26	\| Texts reveal \| Staggered blurred rise for stacked text lines, quiet fade out. \| [18-texts-reveal.md](./18-texts-reveal.md) \|
27	\| Card hover tilt \| Tilt a card in 3D toward the pointer with a cursor-tracked glare. \| [19-card-tilt.md](./19-card-tilt.md) \|
28	\| Plus to menu morph \| Morph a circular trigger into the menu / panel it opens. \| [20-plus-menu-morph.md](./20-plus-menu-morph.md) \|
29	\| Accordion expand \| Grow / shrink a panel via grid-rows with a chevron flip. \| [21-accordion.md](./21-accordion.md) \|
30	\| Toast open / close \| Rise a toast from below with fade + cross-blur, slower in than out. \| [22-toast.md](./22-toast.md) \|
31	\| Like button \| Fill a heart with a pop + particle burst on like. \| [23-like-button.md](./23-like-button.md) \|
32	\| Learn more hover \| Slide the chevron and spread its arms into an arrow on hover. \| [24-learn-more-hover.md](./24-learn-more-hover.md) \|
33	\| Checkbox check \| Fill the box, then stroke-draw the checkmark. \| [25-checkbox-check.md](./25-checkbox-check.md) \|
34	\| Spinning counter

People who liked this also viewed

6 picks

Type