Hinge (힌지)

요소가 위쪽 가장자리를 축으로 진자처럼 좌우로 흔들리며, 흔들림 폭이 점점 줄어듭니다.

[적용할 곳]에 스윙(Swing) 주목 효과를 넣어 줘.
요소가 매달린 간판처럼 좌우로 흔들리게 해 줘. 처음엔 크게 흔들리다가 금방 잦아들게.
가운데가 아니라 위쪽 가장자리를 축으로 흔들고, 트리거되면 한 번만 재생해 줘.

요소가 한 점을 축으로 회전하며 서서히 사라집니다.

[적용할 곳]에 로테이트 아웃(Rotate Out) 퇴장 애니메이션을 넣어 줘.
요소가 중심을 축으로 반 바퀴 조금 넘게 돌면서 서서히 사라지게 해 줘. 부드럽게, 갈수록 빨라지게.
회전이 끝난 뒤에 제거하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

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

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

요소가 작고 기울어진 상태에서 튀어나와 살짝 지나쳤다가, 깜짝 상자 장난감처럼 자리 잡습니다.

[적용할 곳]에 잭 인 더 박스(Jack In The Box) 등장 애니메이션을 넣어 줘.
요소가 아래쪽 가장자리를 축으로, 아주 작고 기울어진 상태에서 튀어 올라 똑바른 자세를 넘나들며 좌우로 흔들리다 자리 잡게 해 줘. 탄력 있고 장난스럽게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.

요소가 비스듬히 기운 채 옆에서 빠르게 날아 들어와, 도착하면서 반듯하게 펴집니다.

[적용할 곳]에 라이트 스피드 인(Light Speed In) 등장 애니메이션을 넣어 줘. lightspeed in이라고도 불러.
요소가 빠르게 달리는 것처럼 비스듬히 기운 채 옆에서 날아 들어오고, 기울기가 한 번 반대로 살짝 넘어갔다가 도착하면서 반듯해지게 해 줘. 빠르고 극적으로, 끝에서 느려지게.
화면 밖에 있는 동안 가로 스크롤바가 생기지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.

요소가 비스듬히 기울며 서서히 사라지는 동시에 옆으로 빠르게 빠져나갑니다.

[적용할 곳]에 라이트 스피드 아웃(Light Speed Out) 퇴장 애니메이션을 넣어 줘. lightspeed out이라고도 불러.
요소가 비스듬히 기울면서 서서히 사라지는 동시에 옆으로 빠르게 빠져나가게 해 줘. 빠르게, 나갈수록 가속되게.
가장자리를 지날 때 가로 스크롤바가 생기지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.