Fade In / Fade Out (페이드 인 / 페이드 아웃)
다른 이름 Fade
요소가 제자리에서 완전히 투명한 상태에서 완전히 불투명하게 바뀌고, 사라질 때는 반대로 바뀝니다.
쓰는 곳
모달, 토스트, 페이지 콘텐츠 등장
변형
- in
- out
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 페이드 인 / 페이드 아웃(Fade In / Fade Out) 애니메이션을 넣어 줘. 페이드(fade)라고도 불러.
나타날 때는 요소가 제자리에서 완전히 투명한 상태에서 또렷하게 보이는 상태로 바뀌고, 사라질 때는 같은 방식으로 흐려지게 해 줘. 은은하게, 이동이나 크기 변화 없이.
사라진 뒤에는 클릭도 키보드 접근도 안 되게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 즉시 전환해 줘.비슷한 모션
ABCD
Blur In (블러 인)
다른 이름 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
요소가 크게 흐려진 상태에서 점점 또렷해지며, 보통 미끄러지거나 서서히 나타나는 움직임과 함께합니다.
쓰는 곳
헤드라인, 히어로 텍스트 등장
[적용할 곳]에 블러 인(Blur In) 등장 애니메이션을 넣어 줘. 텍스트 포커스 인(text focus in), 포커스 인(focus in), 블러 텍스트 리빌(blur text reveal)이라고도 불러.
내용이 크게 흐리고 투명한 상태에서 시작해 제자리에서 점점 또렷해지게 해 줘. 부드럽고 약간 느리게, 위치는 움직이지 않게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 처음부터 또렷하게 보여 줘.A
B
클릭해 보세요
Fade Through (페이드 스루)
다른 이름 Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
나가는 콘텐츠가 완전히 사라진 뒤, 들어오는 콘텐츠가 살짝 커지며 서서히 나타납니다.
쓰는 곳
서로 관련 없는 화면 사이 전환
[적용할 곳]에 페이드 스루(Fade Through) 페이지 전환을 넣어 줘. 페이드 스루 트랜지션(fade-through transition), 아웃 인 라우트 트랜지션(out-in route transition)이라고도 불러.
먼저 나가는 콘텐츠가 빠르게 완전히 사라지고, 그다음 들어오는 콘텐츠가 살짝 커지면서 제자리에 서서히 나타나게 해 줘.
둘이 절대 겹치지 않게 하고, 커지는 동안 들어오는 콘텐츠의 레이아웃이 밀리지 않게 해 줘.A
B
클릭해 보세요
Crossfade Page Transition (크로스페이드 페이지 트랜지션)
다른 이름 Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto
이전 페이지가 서서히 사라지는 동안 새 페이지가 같은 자리에 서서히 나타납니다.
쓰는 곳
기본 라우트 전환
[적용할 곳]에 크로스페이드 페이지 트랜지션(Crossfade Page Transition)을 넣어 줘. 크로스 디졸브(cross-dissolve), 페이드 트랜지션(fade transition)이라고도 불러.
페이지를 이동하면 이전 페이지가 서서히 사라지는 동시에 새 페이지가 같은 자리에 서서히 나타나게 해 줘. 부드럽고 꽤 빠르게.
페이드 중에 아무것도 밀리지 않게 두 페이지를 같은 위치에 두고, 전환 뒤에는 새 페이지의 주 제목으로 포커스를 옮겨 줘.Fade Up (페이드 업)
다른 이름 Fade In Up, Reveal on Scroll
요소가 살짝 떠오르며 서서히 나타나, 제자리에 자리 잡는 느낌을 줍니다.
쓰는 곳
스크롤로 등장하는 섹션 제목, 카드, 이미지
[적용할 곳]에 페이드 업(Fade Up) 등장 애니메이션을 넣어 줘. 페이드 인 업(fade-in-up), 스크롤 리빌(reveal on scroll)이라고도 불러.
요소가 처음 화면에 들어올 때 살짝 떠오르면서 서서히 나타나게 해 줘. 은은하고 빠르게, 튕기는 느낌 없이.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.Entrance & Exit의 다른 모션
A
Fade In Directional (방향 페이드 인)
다른 이름 Fade In Down, Fade In Left, Fade In Right
요소가 한쪽에서 짧은 거리를 이동해 최종 위치에 자리 잡으며 서서히 나타납니다.
쓰는 곳
로드나 스크롤 때 등장하는 섹션, 카드
[적용할 곳]에 방향 페이드 인(Fade In Directional) 등장 애니메이션을 넣어 줘. 페이드 인 레프트(fade in left), 페이드 인 라이트(fade in right), 페이드 인 다운(fade in down)이라고도 불러.
요소가 한쪽에서 짧은 거리를 이동해 최종 위치에 자리 잡으면서 서서히 나타나게 해 줘. 빠르고 매끄럽게, 도착할 때 감속하고 튕김 없이.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.A
Fade Out Directional (방향 페이드 아웃)
다른 이름 Fade Out Up, Fade Out Down
요소가 한쪽 방향으로 흘러가며 사라집니다.
쓰는 곳
알림, 카드 닫기
[적용할 곳]에 방향 페이드 아웃(Fade Out Directional) 퇴장 애니메이션을 넣어 줘. 페이드 아웃 업(fade out up), 페이드 아웃 다운(fade out down)이라고도 불러.
요소가 한쪽 방향으로 짧게 이동하면서 사라지게 해 줘. 빠르게, 나갈수록 가속하게.
주변 내용이 미리 당겨지지 않게 페이드가 끝난 뒤에 레이아웃에서 빼고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.