jakubantalik/transitions.dev
Developer tools이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기
웹 앱에 가장 필수적인 전환, 에이전트용 스킬, 에이전트용 Refine 도구 모음
개요
Transitions.dev 는 재사용 가능한 CSS 전환의 인터랙티브 모음입니다. 인덱스 페이지의 각 카드는 서로 다른 상호작용 패턴을 보여주며, 복사 준비 가능한 휴대용 CSS 스니펫을 제공합니다. 각 카드에는 복사 버튼이 있어 독립적인 CSS 스니펫을 발송합니다: :root에 의미 있는 CSS 커스텀 속성, t-* 클래스 아래에 네임스페이스가 표시된 전환 규칙, 그리고 @media(선호-감소-모션: reduce) 가드가 있어 스니펫을 어떤 프로젝트에도 붙여넣고 데모별 마크업이나 크기 설정 없이 어떤 컴포넌트에도 적용할 수 있습니다. 같은 18개의 전환이 설치 가능한 에이전트 스킬로 패키지되어 있어, AI 코딩 도구(커서, 클로드 코드, 코덱스 등)가 프로젝트 내에 직접 적용할 수 있습니다. 스킬 소스는 skills/transitions-dev/ — SKILL.md, 전환당 18개의 참조 파일(01-card-resize.md ... 18-texts-reveal.md), 그리고 _root.css(단독으로 하나의 범용 설치 블록)에 존재합니다. 이 스킬은 인덱스에서 생성됩니다.
개요(AI 번역)
Transitions.dev 는 재사용 가능한 CSS 전환의 인터랙티브 모음입니다. 인덱스 페이지의 각 카드는 서로 다른 상호작용 패턴을 보여주며, 복사 준비 가능한 휴대용 CSS 스니펫을 제공합니다.
라이브 사이트: https://transitions.dev/
전환
| # | 이름 | 무엇을 보여주는지 |
|---|---|---|
| 1 | 카드 크기 조정 | 부드러운 카드 크기 조정 전환. |
| 2 | 숫자 팝인 | 흐릿함과 스태거가 있는 손가락 뒤집기. |
| 3 | 알림 배지 | 스프링 팝인이 있는 대각선 슬라이드. |
| 4 | 텍스트 상태 교체 | 텍스트 전환과 블러가 섞여 있습니다. |
| 5 | 메뉴 드롭다운 | 원점에 따른 열기/닫힘 전환. |
| 6 | 모드 열/닫힘 | 음계에 따른 모드 전이. |
| 7 | 패널 공개 | 패널 열림/닫힘 전환. |
| 8 | 페이지 나란히 비교 | 앞뒤 페이지 전환. |
| 9 | 아이콘 교체 | 크기 및 흐림 아이콘 교체. |
| 10 | 성공 체크 | 페이드, 회전, 흐림, Y-보브, SVG 경로 그리기가 포함된 확인 아이콘. |
| 11 | 아바타 그룹 호버 | 호버링된 아바타가 나타나고 이웃들도 떨어지며 따라온다. |
| 12 | 오류 상태 흔들림 | 검증 오류 시 입력 흔들기와 자동 중립 되돌림. |
이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요.
README
원문 README의 일부입니다. 원문 보기.
Transitions.dev
Transitions.dev is an interactive collection of reusable CSS transitions. Each card on the index page demonstrates a different interaction pattern and ships a copy-ready, portable CSS snippet for each.
Live site: https://transitions.dev/
Transitions
| # | Name | What it shows |
|---|---|---|
| 1 | Card resize | Smooth card resize transition. |
| 2 | Number pop-in | Digit flip with blur and stagger. |
| 3 | Notification badge | Diagonal slide with spring pop-in. |
| 4 | Text states swap | Text swap transition with blur. |
| 5 | Menu dropdown | Origin-aware open / close transition. |
| 6 | Modal open / close | Modal transition with scale. |
| 7 | Panel reveal | Panel open / close transition. |
| 8 | Page side-by-side | Forward / back page transition. |
| 9 | Icon swap | Scale and blur icon swap. |
| 10 | Success check | Confirmation icon with fade, rotate, blur, Y-bob, and SVG path draw. |
| 11 | Avatar group hover | Hovered avatar springs up while neighbours follow with a falloff. |
| 12 | Error state shake | Input shake on validation error with auto-revert to neutral. |
Each card has a copy button that emits a self-contained CSS snippet: semantic CSS custom properties on :root, the transition rules namespaced under t-* classes, and a @media (prefers-reduced-motion: reduce) guard — so you can paste the snippet into any project and apply it to any component without pulling in demo-specific markup or sizing.
Install with the CLI (npm)
Pull any transition into your project from the terminal — no manual copy:
npx transitions-dev add card-resize # free, no account needed
npx transitions-dev add --free # every free transition at once
npx transitions-dev list # see everything available
Pro transitions unlock after a passwordless browser sign-in (device flow — no API key in your terminal):
npx transitions-dev login # opens the browser to confirm a code
npx transitions-dev add confetti-burst # pulls the Pro CSS + React
CLI source: cli/ (published as the public transitions-dev package; transitions-pro is the old name and forwards to it — it holds no premium source; Pro recipes are fetched from the authenticated API).
Use as an agent skill
The same transitions are packaged as an installable agent skill so AI coding tools (Cursor, Claude Code, Codex, …) can apply them directly inside your project.
npx skills add Jakubantalik/transitions.dev
Skill source lives in skills/transitions-dev/ — SKILL.md, eighteen per-transition reference files (01-card-resize.md … 18-texts-reveal.md), and _root.css (the universal install block on its own).
추천 도구
다른 키워드를 입력하거나 필터를 제거해 보세요.
설치
npx skillfish add jakubantalik/transitions.dev