Rotate Out (로테이트 아웃)

요소가 오른쪽으로 굴러 나가며 서서히 사라집니다.

[적용할 곳]에 롤 아웃(Roll Out) 퇴장 애니메이션을 넣어 줘.
요소가 바퀴처럼 회전하면서 오른쪽으로 굴러 나가고, 동시에 서서히 사라지게 해 줘. 부드럽게, 나갈수록 빨라지게.
다 굴러 나간 뒤에 레이아웃에서 빼고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

요소가 왼쪽 위 모서리를 경첩 삼아 흔들리며 매달렸다가 화면 밖으로 떨어집니다.

[적용할 곳]에 힌지(Hinge) 퇴장 애니메이션을 넣어 줘.
나사가 풀린 것처럼 요소가 왼쪽 위 모서리를 축으로 아래로 늘어지고, 앞뒤로 흔들리다가 사라지면서 화면 밖으로 떨어지게 해 줘. 느리고 코믹하게, 의도적으로.
레이아웃을 밀거나 스크롤바를 만들지 않고 다른 내용 위로 떨어지게 하고, 다 떨어지면 없애고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

요소가 모서리나 중심을 축으로 회전하며 서서히 나타납니다.

[적용할 곳]에 로테이트 인(Rotate In) 등장 애니메이션을 넣어 줘. rotate in down left라고도 불러.
요소가 기울어진 각도에서 왼쪽 아래 모서리를 축으로 돌며 제자리로 들어오고, 동시에 서서히 나타나게 해 줘. 부드럽고 여유 있게, 자리 잡을 때 느려지게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.

요소가 컨테이너 가장자리 바깥에서 제자리까지 페이드 없이 미끄러져 들어옵니다.

[적용할 곳]에 슬라이드 인(Slide In) 등장 애니메이션을 넣어 줘. slide in left, slide in right, slide in up, slide in down이라고도 불러.
요소가 컨테이너 가장자리 바깥에서 제자리까지 미끄러져 들어오고, 그동안 계속 완전히 불투명하게 해 줘. 빠르게, 튕김 없이 부드럽게 감속하게.
바깥에 있는 동안 이웃 요소와 겹치거나 스크롤바가 생기지 않게 컨테이너 가장자리에서 잘라 주고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 제자리에 바로 보여 줘.

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

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

그룹 안의 항목이 짧은 간격을 두고 차례로 움직여, 한꺼번에 나타나는 대신 물결처럼 이어집니다.

[적용할 곳]에 스태거(Stagger) 애니메이션을 넣어 줘. 스태거드 애니메이션(staggered animation), 캐스케이드(cascade)라고도 불러.
항목들이 짧고 일정한 간격을 두고 하나씩 차례로 떠오르며 나타나게 해서, 한꺼번에가 아니라 빠른 물결처럼 보이게 해 줘.
항목이 많아도 전체가 짧게 끝나게 하고, 화면에 들어올 때 한 번만 재생하고, 모션 줄이기(prefers-reduced-motion)를 켠 사용자에게는 움직임 없이 보여 줘.