Back Out (백 아웃)

요소가 살짝 튀었다가 줄어들거나 가장자리 밖으로 날아갑니다.

[적용할 곳]에 바운스 아웃(Bounce Out) 퇴장 애니메이션을 넣어 줘.
요소가 살짝 가라앉았다가 원래 크기보다 조금 부풀고, 그다음 줄어들면서 사라지게 해 줘. 짧고 탄력 있게.
애니메이션이 끝난 뒤에 레이아웃에서 빼고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

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

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

요소가 컨테이너 가장자리 너머로 미끄러져 나가 사라집니다.

[적용할 곳]에 슬라이드 아웃(Slide Out) 퇴장 애니메이션을 넣어 줘. slide out up, slide out down이라고도 불러.
요소가 완전히 불투명한 채로 컨테이너 가장자리 너머로 미끄러져 나가 사라지게 해 줘. 빠르게, 나갈수록 가속되게.
컨테이너 가장자리에서 잘라 주고, 화면에서 벗어나면 키보드와 스크린 리더에서도 숨기고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

요소가 한쪽 방향으로 흘러가며 사라집니다.

[적용할 곳]에 방향 페이드 아웃(Fade Out Directional) 퇴장 애니메이션을 넣어 줘. 페이드 아웃 업(fade out up), 페이드 아웃 다운(fade out down)이라고도 불러.
요소가 한쪽 방향으로 짧게 이동하면서 사라지게 해 줘. 빠르게, 나갈수록 가속하게.
주변 내용이 미리 당겨지지 않게 페이드가 끝난 뒤에 레이아웃에서 빼고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

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

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

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

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

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

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