다른 이름 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 slideshow, Carousel fade
슬라이드가 옆으로 밀리지 않고 제자리에서 서로 스며들듯 바뀝니다.
[적용할 곳]에 캐러셀 크로스페이드(Carousel Crossfade)를 넣어 줘. 페이드 슬라이드쇼(fade slideshow), 캐러셀 페이드(carousel fade)라고도 불러.
슬라이드는 제자리에 있고 이전 것이 사라지는 동시에 다음 것이 나타나며 천천히 스며들듯 바뀌고, 다음 전환 전까지 몇 초간 머물게 해 줘.
첫 슬라이드로 끊김 없이 돌아가게 하고, 마우스를 올리거나 포커스가 가면 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 자동으로 넘기지 마.
요소가 제자리에서 완전히 투명한 상태에서 완전히 불투명하게 바뀌고, 사라질 때는 반대로 바뀝니다.
[적용할 곳]에 페이드 인 / 페이드 아웃(Fade In / Fade Out) 애니메이션을 넣어 줘. 페이드(fade)라고도 불러.
나타날 때는 요소가 제자리에서 완전히 투명한 상태에서 또렷하게 보이는 상태로 바뀌고, 사라질 때는 같은 방식으로 흐려지게 해 줘. 은은하게, 이동이나 크기 변화 없이.
사라진 뒤에는 클릭도 키보드 접근도 안 되게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 즉시 전환해 줘.
다른 이름 Scale transition, Zoom in / out
이전 페이지가 커지거나 작아지며 사라지는 동안 새 페이지가 크기를 바꾸며 제자리에 자리 잡습니다.
쓰는 곳
계층 안으로 들어가거나 빠져나오는 이동
[적용할 곳]에 줌 페이지 트랜지션(Zoom Page Transition)을 넣어 줘. 스케일 트랜지션(scale transition), 줌 인 / 아웃(zoom in / out)이라고도 불러.
안으로 들어갈 때는 이전 페이지가 살짝 커지며 사라지고 새 페이지가 조금 작은 크기에서 커지며 자리 잡게 하고, 돌아올 때는 반대로 줌 아웃되게 해 줘. 부드럽고 빠르게.
내용이 내내 읽힐 수 있게 크기 변화는 은은하게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드로 바꿔 줘.