이동·변형·등장 표현
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
스케일 애니메이션 Scale Animation
요소의 크기 비율을 시간에 따라 바꾸는 표현.
버튼 반응·팝업 등장.
아래는 모션의 형태명이다. 구현 시 위치·축·투명도·지속시간·재생 조건을 함께 지정한다.
모핑 Morphing
한 형태를 다른 형태로 연속 변형하는 표현.
아이콘 전환·유기적 도형 변화.
아래는 모션의 형태명이다. 구현 시 위치·축·투명도·지속시간·재생 조건을 함께 지정한다.
크로스페이드 Crossfade
기존 요소나 신호의 강도를 줄이면서 새 요소나 신호를 동시에 높이는 전환. 영상·UI에서는 주로 불투명도, 음향에서는 음량 등을 변화시킨다.
이미지·화면·오디오의 부드러운 교체.
같은 용어가 시각·음향에 모두 쓰인다. 변경할 속성을 구체적으로 지정한다.
페이드 인 Fade-in
투명도를 높이며 점차 나타나는 표현.
콘텐츠·오버레이 등장.
아래는 모션의 형태명이다. 구현 시 위치·축·투명도·지속시간·재생 조건을 함께 지정한다.
페이드 아웃 Fade-out
투명도를 낮추며 점차 사라지는 표현.
알림·패널 퇴장.
아래는 모션의 형태명이다. 구현 시 위치·축·투명도·지속시간·재생 조건을 함께 지정한다.
슬라이드 인 Slide-in
화면 밖이나 다른 위치에서 이동해 들어오는 표현.
드로어·바텀시트 등장.
아래는 모션의 형태명이다. 구현 시 위치·축·투명도·지속시간·재생 조건을 함께 지정한다.
슬라이드 아웃 Slide-out
요소가 한 방향으로 이동하며 퇴장하는 표현.
패널·메시지 제거.
아래는 모션의 형태명이다. 구현 시 위치·축·투명도·지속시간·재생 조건을 함께 지정한다.
회전 애니메이션 Rotation Animation
요소의 각도를 변화시키는 표현.
로딩·방향 변화.
아래는 모션의 형태명이다. 구현 시 위치·축·투명도·지속시간·재생 조건을 함께 지정한다.
이동 애니메이션 Translation Animation
요소의 위치를 연속적으로 바꾸는 표현.
카드 이동·슬라이더.
아래는 모션의 형태명이다. 구현 시 위치·축·투명도·지속시간·재생 조건을 함께 지정한다.
기울이기 애니메이션 Skew Animation
도형의 축을 비스듬하게 변형하는 표현.
속도감·스타일화 전환.
아래는 모션의 형태명이다. 구현 시 위치·축·투명도·지속시간·재생 조건을 함께 지정한다.
카드 뒤집기 애니메이션 Card Flip Animation
카드나 패널을 회전시켜 앞뒤가 바뀌는 듯한 표현.
카드 상세·양면 콘텐츠.
아래는 모션의 형태명이다. 구현 시 위치·축·투명도·지속시간·재생 조건을 함께 지정한다.
경로 모핑 Path Morphing
벡터 경로의 점과 곡선을 변형해 다른 경로로 전환하는 방식.
SVG 아이콘·로고 애니메이션.
경로 구조 호환이나 별도의 대응점 계산이 필요할 수 있다.
클립 리빌 Clip Reveal
잘라 보이는 영역을 넓혀 콘텐츠를 드러내는 표현.
제목·이미지 등장.
아래는 모션의 형태명이다. 구현 시 위치·축·투명도·지속시간·재생 조건을 함께 지정한다.
마스크 리빌 Mask Reveal
마스크 값의 변화로 보이는 영역을 제어하는 등장 표현.
브랜드·영상·복합 전환.
아래는 모션의 형태명이다. 구현 시 위치·축·투명도·지속시간·재생 조건을 함께 지정한다.
와이프 전환 Wipe Transition
한쪽 경계가 쓸고 지나가며 새 장면을 드러내는 전환.
슬라이드·섹션 이동.
아래는 모션의 형태명이다. 구현 시 위치·축·투명도·지속시간·재생 조건을 함께 지정한다.
선 그리기 애니메이션 Stroke Draw
경로를 따라 선이 그려지는 것처럼 보이는 표현.
서명·아이콘·진행 경로.
아래는 모션의 형태명이다. 구현 시 위치·축·투명도·지속시간·재생 조건을 함께 지정한다.
블러 전환 Blur Transition
흐림 정도를 바꾸며 상태를 전환하는 표현.
배경·포커스·콘텐츠 교체.
큰 영역의 필터 비용과 글자 가독성을 확인한다.
색 전환 Color Transition
색상값을 보간해 점차 바꾸는 표현.
테마·호버·상태 강조.
아래는 모션의 형태명이다. 구현 시 위치·축·투명도·지속시간·재생 조건을 함께 지정한다.
그라디언트 애니메이션 Gradient Animation
그라디언트의 위치·각도·색 구성을 변화시키는 표현.
배경·강조·빛 흐름.
아래는 모션의 형태명이다. 구현 시 위치·축·투명도·지속시간·재생 조건을 함께 지정한다.
타자기 효과 Typewriter Effect
문자를 순차적으로 드러내 입력되는 듯 보이는 표현.
스토리·소개 문구.
실제 데이터가 순차 도착하는 스트리밍과는 별개다.
Movement, Transformation & Entrances
Open an entry for its visual reference, comparisons and source-language text.
Scale Animation 스케일 애니메이션
Changing an element's scale over time.
Button responses and popup entrances.
These names describe motion forms. Also specify position, axis, opacity, duration, and playback conditions.
Morphing 모핑
Continuously transforming one shape into another.
Icon transitions and organic shape changes.
These names describe motion forms. Also specify position, axis, opacity, duration, and playback conditions.
Crossfade 크로스페이드
A transition reducing one element or signal while increasing another, typically using opacity for visuals or volume for audio.
Smooth replacement of images, screens, or audio.
The same term can refer to visual or audio effects. Specify the property being changed.
Fade-in 페이드 인
Gradually appearing by increasing opacity.
Content and overlay entrances.
These names describe motion forms. Also specify position, axis, opacity, duration, and playback conditions.
Fade-out 페이드 아웃
Gradually disappearing by decreasing opacity.
Notification and panel exits.
These names describe motion forms. Also specify position, axis, opacity, duration, and playback conditions.
Slide-in 슬라이드 인
Entering from outside the screen or from another position.
Drawer and bottom-sheet entrances.
These names describe motion forms. Also specify position, axis, opacity, duration, and playback conditions.
Slide-out 슬라이드 아웃
Exiting while moving in a particular direction.
Removing panels and messages.
These names describe motion forms. Also specify position, axis, opacity, duration, and playback conditions.
Rotation Animation 회전 애니메이션
Animation that changes an element's angle.
Loading and changes in direction.
These names describe motion forms. Also specify position, axis, opacity, duration, and playback conditions.
Translation Animation 이동 애니메이션
Animation that continuously changes an element's position.
Card movement and sliders.
These names describe motion forms. Also specify position, axis, opacity, duration, and playback conditions.
Skew Animation 기울이기 애니메이션
Animation that slants a shape's coordinate axes.
Fast-looking and stylized transitions.
These names describe motion forms. Also specify position, axis, opacity, duration, and playback conditions.
Card Flip Animation 카드 뒤집기 애니메이션
Rotation making a card or panel appear to turn from its front to its back.
Card details and two-sided content.
These names describe motion forms. Also specify position, axis, opacity, duration, and playback conditions.
Path Morphing 경로 모핑
Transitioning between vector paths by changing their points and curves.
SVG icon and logo animation.
Compatible path structures or separate correspondence calculations may be needed.
Clip Reveal 클립 리빌
Revealing content by enlarging the region visible through a clipping boundary.
Title and image entrances.
These names describe motion forms. Also specify position, axis, opacity, duration, and playback conditions.
Mask Reveal 마스크 리빌
An entrance effect controlling visibility by changing a mask.
Brand, video, and complex transitions.
These names describe motion forms. Also specify position, axis, opacity, duration, and playback conditions.
Wipe Transition 와이프 전환
A transition revealing a new scene as a boundary sweeps across it.
Slide and section navigation.
These names describe motion forms. Also specify position, axis, opacity, duration, and playback conditions.
Stroke Draw 선 그리기 애니메이션
An effect making a line appear to be drawn along a path.
Signatures, icons, and progress paths.
These names describe motion forms. Also specify position, axis, opacity, duration, and playback conditions.
Blur Transition 블러 전환
A transition changing the amount of blur between states.
Backgrounds, focus, and content replacement.
Check the cost of filters over large areas and their effect on text readability.
Color Transition 색 전환
Gradually changing color by interpolating color values.
Themes, hover states, and state emphasis.
These names describe motion forms. Also specify position, axis, opacity, duration, and playback conditions.
Gradient Animation 그라디언트 애니메이션
Changing a gradient's position, angle, or colors over time.
Backgrounds, highlights, and flowing light.
These names describe motion forms. Also specify position, axis, opacity, duration, and playback conditions.
Typewriter Effect 타자기 효과
Revealing characters in sequence to suggest typing.
Stories and introductory text.
This is distinct from streaming in which real data arrives incrementally.