ElvinEga/트랜지션.dev

Transitions.dev

12개의 이식성 높은 CSS 전환입니다. 각 전환은 t-* 선택자와 시맨틱 CSS 커스텀 프로퍼티 아래에 네임스페이스가 지정되어 있습니다. 드롭인 방식: 스니펫을 붙여넣고 문서화된 HTML 훅을 연결하면 끝납니다. 프레임워크 의존성, 데모별 마크업이 없으며, 모든 스니펫에는 prefers-reduced-motion 가드가 포함되어 있습니다.

빠른 참조

전환	사용 시기	참조
카드 크기 조절 (Card resize)	레이아웃 상태가 변경될 때 컨테이너의 너비나 높이를 트윈(tween)합니다.	01-card-resize.md
숫자 팝인 (Number pop-in)	숫자가 업데이트될 때 각 자릿수를 흐리게 슬라이드하여 다시 표시합니다.	02-number-pop-in.md
알림 배지 (Notification badge)	작은 배지를 트리거 위로 슬라이드하고 점을 팝(pop)합니다.	03-notification-badge.md
텍스트 상태 교체 (Text states swap)	텍스트를 흐리게 위아래로 전환하며 제자리에서 교체합니다.	04-text-states-swap.md
메뉴 드롭다운 (Menu dropdown)	트리거로부터 자라나는 원점 인식 드롭다운을 엽니다.	05-menu-dropdown.md
모달 열기/닫기 (Modal open / close)	모달 대화상자를 확대하며 열고, 닫을 때는 부드럽게 축소합니다.	06-modal.md
패널 표시 (Panel reveal)	교차 흐림 효과와 함께 패널을 영역 안으로 슬라이드합니다.	07-panel-reveal.md
페이지 나란히 (Page side-by-side)	두 개의 나란한 페이지(목록 ↔ 상세, 단계 1 ↔ 단계 2) 사이를 슬라이드합니다.	08-page-side-by-side.md
아이콘 교체 (Icon swap)	동일한 슬롯에 있는 두 아이콘을 흐림 및 스케일과 함께 교차 페이드합니다.	09-icon-swap.md
성공 체크 (Success check)	페이드 + 회전 + Y-튐 + 경로 스트로크 드로우를 조합하여 완료된 작업을 축하합니다.	10-success-check.md
아바타 그룹 호버 (Avatar group hover)	항목 행에 거리 감쇠 리프트를 적용하고, 돌아올 때는 탄력 있는 스프링 효과를 줍니다.	11-avatar-group-hover.md
오류 상태 흔들림 (Error state shake)	세그먼트별 큐빅 베지어 흔들림과 자동 복귀 테두리 및 메시지를 적용합니다.	12-error-state-shake.md

결정 규칙

사용자가 전환을 요청하면, 먼저 보이는 UI 요소를 매칭한 다음 동사를 매칭하세요:

• 트리거 + 위에 떠 있는 작은 점 → 알림 배지.
• 트리거 + 그로부터 자라나는 표면 → 드롭다운(고정, 원점 인식) 또는 모달(중앙, 고정 없음).
• 페이지 영역 안으로 슬라이드되는 표면 → 패널 표시.
• 두 화면, 목록 ↔ 상세 또는 단계 1 ↔ 단계 2 → 페이지 나란히.
• 요소의 너비나 높이가 변경됨 → 카드 크기 조절.
• 요소의 텍스트 내용이 제자리에서 변경됨 → 텍스트 상태 교체.
• 동일한 슬롯의 두 아이콘 → 아이콘 교체.
• 숫자가 업데이트됨 → 숫자 팝인.
• 확인 / 성공 / "완료" 순간 (체크 표시, 결제 처리, 파일 업로드) → 성공 체크.
• 가로 스택의 항목 호버 (아바타, 칩, 분할 버튼, 태그 파일) → 아바타 그룹 호버.
• 폼 유효성 검사 오류 / "이것은 잘못되었습니다" 피드백 (유효하지 않은 필드, 잘못된 PIN, 중복 이름) → 오류 상태 흔들림.
• 명확한 매칭 없음 → transitions reveal로 대체하고 사용자가 선택하도록 합니다. 추측하지 마세요.

두 개의 전환이 적합할 수 있다면, 오버헤드가 더 낮은 쪽(패널 표시보다 카드 크기 조절, 모달보다 드롭다운, 전체 모달 축하보다 성공 체크)을 선호하세요. 단, 디자인이 명확히 더 무거운 표면을 요구하는 경우는 예외입니다. 성공 체크는 애니메이션 전용입니다. 스피너에서 체크로 전환해야 한다면 아이콘 교체와 함께 사용하세요.

명령어

이 스킬은 직접적인 전환 요청 외에도 에이전트가 인식해야 하는 세 개의 네임스페이스 동사를 제공합니다. 모든 명령어는 transitions로 시작하므로 동일한 프로젝트에 설치된 다른 스킬의 동사와 충돌하지 않습니다.

transitions reveal — 모든 전환 나열

트리거 문구: transitions reveal, "reveal the transitions", "list all transitions", "what transitions are in this skill", "show the transitions catalog".

동작: 12개의 전환을 번호가 매겨진 일반 텍스트 목록(이름, 한 줄 요약, 일치하는 참조 파일명)으로 출력합니다. 위 ## 빠른 참조의 행을 재사용하고, 새로운 내용을 만들지 마세요. 프로젝트 접근은 필요 없습니다.

transitions review — 프로젝트 감사

트리거 문구: transitions review, "review my project", "audit my animations", "where would transitions.dev help", "find places to use this skill".

동작:

1. 워크스페이스에서 transition: 선언, @keyframes, 스타일 파일의 하드코딩된 ms / s 지속 시간, 11가지 결정 규칙 패턴(모달, 드롭다운, 배지, …)과 일치하는 컴포넌트를 검색합니다.
2. 각 히트에 대해 결정 규칙과 매칭하여 가장 적합한 단일 전환을 선택합니다.
3. 파일별로 그룹화된 번호 목록을 출력합니다:
   • path/to/Component.tsx:L42 — 드롭다운 열기처럼 보임, menu-dropdown (05-menu-dropdown.md) 제안.
   • 이미 t-* 클래스를 사용하는 임시 전환은 건너뜁니다.
4. 아무것도 편집하지 마세요. 다음으로 끝내세요: "Run transitions apply on any line to install the suggested transition."

transitions apply — 최적 전환 설치

트리거 문구: transitions apply, "apply a transition here", "add the right transition", "install transitions-dev here", "fix the animation on this element".

동작:

1. 컨텍스트 읽기: 현재 열린 파일, 커서에 가장 가까운 요소, 주변 CSS / JSX. 사용자가 명시적으로 전환을 지정했다면(예: transitions apply menu-dropdown) 그것을 사용합니다.
2. 해당 컨텍스트에 ## 결정 규칙의 결정 규칙을 적용하여 하나의 전환을 선택합니다. 두 개가 적합하다면 오버헤드가 더 낮은 쪽(기존 규칙과 동일한 타이브레이커)을 선호합니다.
3. 한 줄 제안을 표시합니다: "I'd apply menu-dropdown here because the element opens from a trigger and is anchored. Confirm to install?"
4. 확인 시, ## 출력 형식의 기존 5단계 절차(루트 블록, 스니펫, 훅, reduced-motion 가드, 필요한 경우 JS 오케스트레이션)를 그대로 따릅니다.
5. 에이전트가 자신 있게 단일 전환을 선택할 수 없다면 transitions reveal로 대체하고 사용자에게 선택을 요청합니다.

범용 설치

이 :root 블록을 프로젝트에 한 번 넣으세요. 모든 전환 스니펫은 이러한 시맨틱 이름에서 값을 읽어옵니다. 나중에 추적해야 할 컴포넌트별 값은 없습니다.

/* transitions-dev — 이 :root 블록을 프로젝트에 한 번 복사하세요.
   모든 전환 스니펫은 이러한 시맨틱 이름에서 값을 읽어옵니다. */
:root {
  /* Card resize */
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Number pop-in */
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  /* Notification badge */
  --badge-slide-dur: 260ms;
  --badge-pop-dur: 500ms;
  --badge-pop-close-dur: 180ms;
  --badge-fade-dur: 400ms;
  --badge-fade-close-dur: 180ms;
  --badge-blur: 2px;
  --badge-offset-x: -8.2px;
  --badge-offset-y: 12.4px;
  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Text states swap */
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  /* Menu dropdown */
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Modal open / close */
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Panel reveal */
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Page side-by-side */
  --page-slide-dur: 200ms;
  --page-fade-dur: 200ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Icon swap */
  --icon-swap-dur: 200ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  /* Success check */
  --check-opacity-dur: 550ms;
  --check-rotate-dur: 550ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 450ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 550ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  /* Avatar group hover */
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.05;
  --avatar-falloff: 0.45;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1);
  /* Error state shake */
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
}

transitions.dev 라이브 데모에서 사용하는 --pX-* 소스 토큰은 의도적으로 여기에 내보내지 않았습니다. 조정 가능한 값은 시맨틱 이름(--badge-*, --dropdown-*, --modal-*, …)으로 이름이 변경되어 사용자가 디자인 어휘를 소유할 수 있습니다.

출력 형식

사용자의 프로젝트에 전환을 삽입할 때:

1. 위의 :root 블록을 사용자의 전역 스타일시트에 추가하되, 아직 없는 경우에만 추가합니다. 사용자가 이미 범용 설치 블록을 한 번 가져온 경우 중복하지 마세요.
2. 선택한 전환의 CSS를 해당 참조 파일에서 그대로 붙여넣으세요. 선택자를 다시 작성하지 말고, 전환을 단축 속성으로 축소하지 말고, will-change를 제거하지 마세요. 스니펫은 조정되고 테스트되었습니다.
3. 문서화된 HTML 훅을 연결하세요 — 클래스 이름(.t-dropdown, .t-modal, .t-success-check, .t-avatar, .t-input, …)과 상태 속성(data-open, data-state, data-page, .is-open, .is-closing, .is-exit, .is-enter-start, .is-animating, .is-error, .is-shaking).
4. @media (prefers-reduced-motion: reduce) 블록을 유지하세요. 모든 스니펫에는 하나가 포함되어 있습니다. 제거하면 컴포넌트가 접근성 감사를 통과하지 못합니다.
5. JS가 필요한 전환(드롭다운, 모달, 텍스트 교체, 숫자 팝인, 페이지 슬라이드, 성공 체크, 아바타 그룹 호버, 오류 상태 흔들림)의 경우, 참조 파일에서 작은 오케스트레이션 스니펫을 복사하여 선택자를 사용자의 DOM에 맞게 조정하세요. 지속 시간이 :root 값과 동기화되도록 타이밍 읽기(getComputedStyle(...)getPropertyValue("--…"))를 유지하세요.

차이(diff)를 작게 유지하세요: 전환을 도입하는 데 필요한 파일만 편집하세요. 사용자의 기존 변수 이름을 변경하지 말고, 관련 없는 CSS의 서식을 다시 지정하지 말고, 모션 라이브러리를 가져오지 마세요.

피해야 할 일반적인 실수

• 드롭다운/모달에서 닫힘 상태 클래스 정리 제거 — .is-closing을 제거하는 setTimeout이 없으면, 다음 열기가 휴식 중인 열기 전 스케일이 아닌 닫힘 스케일에서 시작합니다.
• 텍스트 교체, 숫자 팝인, 성공 체크 재생, 오류 상태 흔들림에서 리플로우(reflow) 누락 — 클래스/속성 제거와 재추가 사이의 void el.offsetWidth(또는 offsetHeight)가 애니메이션 재생을 보장합니다.
• 내부 조각 대신 단일 컨테이너 애니메이션 — 배지의 경우 트리거가 아닌 점을 애니메이션하고, 페이지 슬라이드의 경우 컨테이너가 아닌 페이지 섹션을 애니메이션합니다.
• transition: …을 transition: all로 대체 — 모든 스니펫은 의도적으로 정확한 속성을 열거하므로 관련 없는 스타일 변경이 무료로 포함되지 않습니다.
• 성공 체크의 stroke-dasharray 하드코딩 — 스니펫에는 자리 표시자로 20이 포함되어 있습니다. path.getTotalLength()로 바꾸고 해당 경로에 대해 1을 올림하여 교체하세요. 그렇지 않으면 스트로크가 미리 나타나거나 초과 그려집니다.
• CSS에서 아바타 그룹 호버에 transition-timing-function 설정 — --shift / --scale-active 쓰기 전에 JS에서 인라인으로 설정해야 탄력적인 ease-out이 mouseleave에만 적용됩니다.
• 오류 상태 흔들림에 대해 .is-error와 .is-shaking을 하나의 클래스로 혼합 — 두 클래스를 직교 상태로 유지해야 전체 오류 처리가 깜빡이지 않고 흔들림을 재생(제거 → 리플로우 → 재추가)할 수 있습니다.

참조 파일

• 01-card-resize.md — 카드 크기 조절
• 02-number-pop-in.md — 숫자 팝인
• 03-notification-badge.md — 알림 배지
• 04-text-states-swap.md — 텍스트 상태 교체
• 05-menu-dropdown.md — 메뉴 드롭다운
• 06-modal.md — 모달 열기/닫기
• 07-panel-reveal.md — 패널 표시
• 08-page-side-by-side.md — 페이지 나란히
• 09-icon-swap.md — 아이콘 교체
• 10-success-check.md — 성공 체크
• 11-avatar-group-hover.md — 아바타 그룹 호버
• 12-error-state-shake.md — 오류 상태 흔들림
• _root.css — 직접 가져올 준비가 된 별도의 범용 설치 블록입니다.