Bounce Out (바운스 아웃)

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

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

요소가 줄어들며 서서히 옅어지다 사라집니다.

[적용할 곳]에 줌 아웃(Zoom Out) 퇴장 애니메이션을 넣어 줘. 스케일 아웃(scale out)이라고도 불러.
요소가 중심을 향해 줄어들면서 서서히 옅어지다 사라지게 해 줘. 빠르게, 갈수록 가속되게.
완전히 사라진 뒤에 레이아웃과 키보드 포커스에서 빼고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

요소가 목표를 살짝 지나쳤다가 자리 잡는 통통 튀는 움직임으로 등장합니다. 커지면서 나타나거나 가장자리에서 떨어져 들어옵니다.

[적용할 곳]에 바운스 인(Bounce In) 등장 애니메이션을 넣어 줘. 바운스 인 다운(bounce in down), 바운스 인 업(bounce in up)이라고도 불러.
요소가 작은 상태에서 커지다가 원래 크기를 살짝 넘고, 몇 번 출렁인 뒤 자리 잡게 해 줘. 빠르고 탄력 있게.
계속 시선을 끌지 않게 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.

clip-path나 마스크가 가장자리나 한 점에서 넓어지며 이미지나 텍스트를 차츰 드러냅니다.

[적용할 곳]에 클립 리빌(Clip Reveal) 등장 효과를 넣어 줘. 마스크 리빌(mask reveal), 와이프 리빌(wipe reveal), 이미지 리빌(image reveal)이라고도 불러.
잘라 내는 경계선이 왼쪽에서 오른쪽으로 쓸고 지나가며, 내용은 가만히 있는 채로 차츰 드러나게 해 줘. 매끄럽게, 시작과 끝은 부드럽게.
아무것도 밀리지 않게 처음부터 요소 자리를 잡아 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 전부 드러난 상태로 보여 줘.

요소가 제자리에서 완전히 투명한 상태에서 완전히 불투명하게 바뀌고, 사라질 때는 반대로 바뀝니다.

[적용할 곳]에 페이드 인 / 페이드 아웃(Fade In / Fade Out) 애니메이션을 넣어 줘. 페이드(fade)라고도 불러.
나타날 때는 요소가 제자리에서 완전히 투명한 상태에서 또렷하게 보이는 상태로 바뀌고, 사라질 때는 같은 방식으로 흐려지게 해 줘. 은은하게, 이동이나 크기 변화 없이.
사라진 뒤에는 클릭도 키보드 접근도 안 되게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 즉시 전환해 줘.

요소가 한쪽에서 짧은 거리를 이동해 최종 위치에 자리 잡으며 서서히 나타납니다.

[적용할 곳]에 방향 페이드 인(Fade In Directional) 등장 애니메이션을 넣어 줘. 페이드 인 레프트(fade in left), 페이드 인 라이트(fade in right), 페이드 인 다운(fade in down)이라고도 불러.
요소가 한쪽에서 짧은 거리를 이동해 최종 위치에 자리 잡으면서 서서히 나타나게 해 줘. 빠르고 매끄럽게, 도착할 때 감속하고 튕김 없이.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.