화면·레이아웃 전환
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
공유 요소 전환 Shared Element Transition
두 화면에서 동일한 대상을 연결해 위치·크기가 이어지는 것처럼 표현하는 전환.
목록 카드에서 상세 화면 이동.
전환 중에도 초점·탐색 이력·읽기 순서를 관리한다. 화면 이동과 단순 장식 재생을 구분한다.
페이지 전환 Page Transition
한 페이지에서 다른 페이지로 이동할 때의 시각 변화.
웹 탐색·앱 라우팅.
전환 중에도 초점·탐색 이력·읽기 순서를 관리한다. 화면 이동과 단순 장식 재생을 구분한다.
히어로 전환 Hero Transition
중심 요소를 화면 사이에서 연결하는 전환을 부르는 이름.
제품 이미지·프로필 상세 이동.
일부 프레임워크의 특정 기능명이며 모든 공유 요소 구현의 공식 명칭은 아니다.
컨테이너 변환 Container Transform
작은 컨테이너가 다른 콘텐츠를 담는 큰 컨테이너로 변형되는 전환.
카드에서 상세 패널 확장.
전환 중에도 초점·탐색 이력·읽기 순서를 관리한다. 화면 이동과 단순 장식 재생을 구분한다.
레이아웃 애니메이션 Layout Animation
배치 변경 전후의 위치·크기 차이를 애니메이션으로 표현한다.
목록 재배열·접기·반응형 변화.
전환 중에도 초점·탐색 이력·읽기 순서를 관리한다. 화면 이동과 단순 장식 재생을 구분한다.
FLIP 레이아웃 애니메이션 FLIP Layout Animation
변경 전후 위치를 측정하고 역변환한 뒤 원상태로 재생하는 레이아웃 애니메이션 기법.
재정렬·크기 변경 최적화.
First·Last·Invert·Play의 약자이며 CSS 명령 이름은 아니다.
아코디언 펼침 모션 Accordion Expansion
접힌 콘텐츠가 드러나며 높이나 표시 영역이 변하는 모션.
FAQ·설정 그룹.
전환 중에도 초점·탐색 이력·읽기 순서를 관리한다. 화면 이동과 단순 장식 재생을 구분한다.
드로어 전환 Drawer Transition
화면 측면 패널이 드나드는 전환.
메뉴·필터·도구 패널.
전환 중에도 초점·탐색 이력·읽기 순서를 관리한다. 화면 이동과 단순 장식 재생을 구분한다.
바텀시트 전환 Bottom Sheet Transition
하단 패널의 진입·높이 변경·퇴장을 표현하는 모션.
모바일 선택·보조 작업.
전환 중에도 초점·탐색 이력·읽기 순서를 관리한다. 화면 이동과 단순 장식 재생을 구분한다.
모달 전환 Modal Transition
대화상자의 등장·퇴장과 배경 가림 변화를 표현한다.
확인·입력·집중 작업.
전환 중에도 초점·탐색 이력·읽기 순서를 관리한다. 화면 이동과 단순 장식 재생을 구분한다.
탭 인디케이터 모션 Tab Indicator Motion
선택 탭의 밑줄·배경 등 강조 표식이 이동하는 모션.
탭 변경의 연속성.
전환 중에도 초점·탐색 이력·읽기 순서를 관리한다. 화면 이동과 단순 장식 재생을 구분한다.
목록 재정렬 모션 List Reorder Animation
항목 순서 변경 시 새 자리로 이동하는 과정 표현.
드래그 정렬·순위 변경.
전환 중에도 초점·탐색 이력·읽기 순서를 관리한다. 화면 이동과 단순 장식 재생을 구분한다.
펼침·접힘 모션 Expand / Collapse Motion
영역의 크기·내용 공개 정도를 변화시키는 표현.
카드·트리·상세 내용.
전환 중에도 초점·탐색 이력·읽기 순서를 관리한다. 화면 이동과 단순 장식 재생을 구분한다.
목록·상세 전환 Master-detail Transition
전체 목록과 선택 대상의 상세 보기 사이 관계를 보여주는 전환.
메일·파일·상품 관리.
전환 중에도 초점·탐색 이력·읽기 순서를 관리한다. 화면 이동과 단순 장식 재생을 구분한다.
뷰 전환 스냅샷 View Transition Snapshot
화면 상태의 표현을 캡처해 이전·다음 상태 전환에 사용하는 이미지 표현.
브라우저 뷰 전환.
실시간 DOM 자체를 항상 연속 이동시키는 것과는 다르다.
제스처 구동 전환 Gesture-driven Transition
사용자의 끌기·스와이프 진행량에 따라 전환 위치가 결정되는 방식.
뒤로 가기·시트 닫기.
전환 중에도 초점·탐색 이력·읽기 순서를 관리한다. 화면 이동과 단순 장식 재생을 구분한다.
중단 가능한 전환 Interruptible Transition
진행 중 새 입력을 받아 자연스럽게 목표를 바꿀 수 있는 전환.
빠른 반복 클릭·연속 탐색.
전환 중에도 초점·탐색 이력·읽기 순서를 관리한다. 화면 이동과 단순 장식 재생을 구분한다.
되돌릴 수 있는 전환 Reversible Transition
취소나 역방향 입력에 따라 진행 방향을 되돌리는 전환.
스와이프 취소·패널 복귀.
전환 중에도 초점·탐색 이력·읽기 순서를 관리한다. 화면 이동과 단순 장식 재생을 구분한다.
Screen & Layout Transitions
Open an entry for its visual reference, comparisons and source-language text.
Shared Element Transition 공유 요소 전환
A transition connecting the same object across screens so its position and size appear continuous.
Moving from a list card to a detail screen.
Manage focus, navigation history, and reading order during transitions. Distinguish navigation from decorative animation.
Page Transition 페이지 전환
The visual change when navigating from one page to another.
Website navigation and application routing.
Manage focus, navigation history, and reading order during transitions. Distinguish navigation from decorative animation.
Hero Transition 히어로 전환
A name for a transition linking a prominent element across screens.
Transitions to product images and profile details.
This is a specific feature name in some frameworks, not the universal name for shared-element implementations.
Container Transform 컨테이너 변환
A transition transforming a small container into a larger one holding different content.
Expanding a card into a detail panel.
Manage focus, navigation history, and reading order during transitions. Distinguish navigation from decorative animation.
Layout Animation 레이아웃 애니메이션
Animating differences in position or size before and after a layout change.
List rearrangement, collapsing, and responsive changes.
Manage focus, navigation history, and reading order during transitions. Distinguish navigation from decorative animation.
FLIP Layout Animation FLIP 레이아웃 애니메이션
A layout technique measuring before and after positions, applying an inverse transform, then animating to the final state.
Optimizing rearrangement and resizing.
FLIP stands for First, Last, Invert, Play; it is not a CSS command.
Accordion Expansion 아코디언 펼침 모션
Motion changing height or visible area as collapsed content is revealed.
FAQs and settings groups.
Manage focus, navigation history, and reading order during transitions. Distinguish navigation from decorative animation.
Drawer Transition 드로어 전환
A transition moving a side panel into or out of view.
Menus, filters, and tool panels.
Manage focus, navigation history, and reading order during transitions. Distinguish navigation from decorative animation.
Bottom Sheet Transition 바텀시트 전환
Motion expressing a bottom panel's entrance, height change, or exit.
Mobile selection and secondary actions.
Manage focus, navigation history, and reading order during transitions. Distinguish navigation from decorative animation.
Modal Transition 모달 전환
Motion expressing a dialog's entrance or exit and changes to its backdrop.
Confirmation, input, and focused tasks.
Manage focus, navigation history, and reading order during transitions. Distinguish navigation from decorative animation.
Tab Indicator Motion 탭 인디케이터 모션
Movement of an underline, background, or other selected-tab marker.
Continuity when switching tabs.
Manage focus, navigation history, and reading order during transitions. Distinguish navigation from decorative animation.
List Reorder Animation 목록 재정렬 모션
Motion showing items moving into new positions after reordering.
Drag sorting and rank changes.
Manage focus, navigation history, and reading order during transitions. Distinguish navigation from decorative animation.
Expand / Collapse Motion 펼침·접힘 모션
Motion changing an area's size or the amount of content revealed.
Cards, trees, and detailed content.
Manage focus, navigation history, and reading order during transitions. Distinguish navigation from decorative animation.
Master-detail Transition 목록·상세 전환
A transition showing the relationship between a collection and a selected item's details.
Managing mail, files, and products.
Manage focus, navigation history, and reading order during transitions. Distinguish navigation from decorative animation.
View Transition Snapshot 뷰 전환 스냅샷
An image representation capturing a view state for a transition between old and new states.
Browser view transitions.
This is not the same as always moving the live DOM itself continuously.
Gesture-driven Transition 제스처 구동 전환
A transition whose position is determined by the user's drag or swipe progress.
Back navigation and sheet dismissal.
Manage focus, navigation history, and reading order during transitions. Distinguish navigation from decorative animation.
Interruptible Transition 중단 가능한 전환
A transition that can accept new input and smoothly change its target while running.
Rapid repeated clicks and continuous navigation.
Manage focus, navigation history, and reading order during transitions. Distinguish navigation from decorative animation.
Reversible Transition 되돌릴 수 있는 전환
A transition that can reverse direction in response to cancellation or opposite input.
Canceling swipes and returning panels.
Manage focus, navigation history, and reading order during transitions. Distinguish navigation from decorative animation.