Zoom Out (줌 아웃)

요소가 크고 흐릿하며 투명한 상태에서 줄어들며 또렷해져 연기처럼 나타나고, 사라질 때는 반대로 움직입니다.

[적용할 곳]에 퍼프 인 / 퍼프 아웃(Puff In / Puff Out) 애니메이션을 넣어 줘. 퍼프(puff)라고도 불러.
나타날 때는 크고 흐릿하며 투명한 상태에서 줄어들며 연기가 가라앉듯 또렷해지고, 사라질 때는 다시 흐릿하게 부풀면서 없어지게 해 줘. 부드럽고 꽤 빠르게.
커진 상태가 레이아웃을 밀어내거나 스크롤바를 만들지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 즉시 전환해 줘.

요소가 줄어들면서 가장자리 쪽으로 미끄러져 나가며 사라집니다.

[적용할 곳]에 백 아웃(Back Out) 퇴장 애니메이션을 넣어 줘.
요소가 먼저 제자리에서 살짝 줄어든 다음, 가장자리 쪽으로 미끄러져 나가면서 사라지게 해 줘. 한 번에 빠르게 사라지는 게 아니라 의도적인 두 단계 퇴장으로.
움직이는 도중에 레이아웃이 튀지 않게 애니메이션이 끝난 뒤에 요소를 없애고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 없애 줘.

요소가 사라지거나 미끄러져 나가면서 점점 흐려집니다.

[적용할 곳]에 블러 아웃(Blur Out) 퇴장 애니메이션을 넣어 줘. 텍스트 블러 아웃(text blur out), 스모키 텍스트 디시페이트(smoky text dissipate)라고도 불러.
내용이 제자리에서 점점 더 흐려지면서 사라지게 해 줘. 녹아 없어지듯 부드럽고 약간 느리게.
흐려짐이 끝난 뒤에 요소를 숨기거나 없애고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

포인터가 올라가 있으면 요소가 부드럽게 살짝 작아집니다.

[적용할 곳]에 슈링크(Shrink) 호버 효과를 넣어 줘. 스케일 다운(scale down)이라고도 불러.
포인터가 올라가 있는 동안 요소가 부드럽게 살짝 작아지고, 벗어나면 원래 크기로 돌아오게 해 줘. 빠르고 은은하게.
주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

요소가 작게 줄어든 채 비켜난 위치에서 시작해, 미끄러져 들어오며 원래 크기로 커집니다.

[적용할 곳]에 백 인(Back In) 등장 애니메이션을 넣어 줘. 백 인 업(back in up), 백 인 다운(back in down)이라고도 불러.
요소가 작게 줄어들고 살짝 흐린 채로 가장자리 바깥에서 들어오고, 제자리에 도착한 뒤에 원래 크기로 커지게 해 줘. 톡 튀어나오는 게 아니라 의도적인 두 단계 움직임으로.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.

요소가 크게 흐려진 상태에서 점점 또렷해지며, 보통 미끄러지거나 서서히 나타나는 움직임과 함께합니다.

[적용할 곳]에 블러 인(Blur In) 등장 애니메이션을 넣어 줘. 텍스트 포커스 인(text focus in), 포커스 인(focus in), 블러 텍스트 리빌(blur text reveal)이라고도 불러.
내용이 크게 흐리고 투명한 상태에서 시작해 제자리에서 점점 또렷해지게 해 줘. 부드럽고 약간 느리게, 위치는 움직이지 않게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 처음부터 또렷하게 보여 줘.