Entrance & Exit

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

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

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

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

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

[적용할 곳]에 바운스 아웃(Bounce Out) 퇴장 애니메이션을 넣어 줘.
요소가 살짝 가라앉았다가 원래 크기보다 조금 부풀고, 그다음 줄어들면서 사라지게 해 줘. 짧고 탄력 있게.
애니메이션이 끝난 뒤에 레이아웃에서 빼고, 사용자가 모션 줄이기(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)를 켜 두었으면 움직임 없이 제자리에 보여 줘.

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

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

요소가 살짝 떠오르며 서서히 나타나, 제자리에 자리 잡는 느낌을 줍니다.

[적용할 곳]에 페이드 업(Fade Up) 등장 애니메이션을 넣어 줘. 페이드 인 업(fade-in-up), 스크롤 리빌(reveal on scroll)이라고도 불러.
요소가 처음 화면에 들어올 때 살짝 떠오르면서 서서히 나타나게 해 줘. 은은하고 빠르게, 튕기는 느낌 없이.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.

요소가 고장 난 네온사인처럼 빠르게 깜빡이다가 켜진 상태로 남습니다.

[적용할 곳]에 플리커 인(Flicker In) 등장 애니메이션을 넣어 줘.
고장 난 네온사인처럼 요소가 불규칙한 간격으로 몇 번 켜졌다 꺼졌다 한 뒤 켜진 채로 남게 해 줘. 딱딱 끊기는 깜빡임으로, 위치는 움직이지 않게.
한 번만 재생하고, 깜빡이는 빛에 민감한 사람도 안전하도록 깜빡임은 적고 너무 빠르지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 켜진 상태로 보여 줘.

요소가 Y축을 중심으로 한 바퀴 돌면서 보는 사람 쪽으로 살짝 다가왔다가 돌아갑니다.

[적용할 곳]에 플립(Flip) 애니메이션을 넣어 줘.
요소가 세로축을 중심으로 한 바퀴 돌면서 보는 사람 쪽으로 살짝 다가오고, 크기가 아주 살짝 줄었다가 제자리로 돌아오게 해 줘. 생기 있지만 짧게.
회전이 입체적으로 보이게 원근감(perspective)을 주고, 반복하지 말고 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회전을 생략해 줘.

요소가 가로축이나 세로축을 중심으로 3D 회전해, 옆면만 보이던 상태에서 정면을 향하게 됩니다.

[적용할 곳]에 플립 인(Flip In) 등장 애니메이션을 넣어 줘. 플립 인 X(flip in X), 플립 인 Y(flip in Y)라고도 불러.
요소가 옆면만 보이는 상태에서 시작해 가로축을 중심으로 돌아 정면을 향하고, 살짝 지나쳤다가 돌아와 자리 잡게 해 줘. 빠르게, 작은 흔들림과 함께.
회전이 입체적으로 보이게 원근감(perspective)을 주고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 정면 상태로 보여 줘.

요소가 3D로 회전해 옆면만 남으며 보이지 않게 됩니다.

[적용할 곳]에 플립 아웃(Flip Out) 퇴장 애니메이션을 넣어 줘. 플립 아웃 X(flip out X), 플립 아웃 Y(flip out Y)라고도 불러.
요소가 살짝 뒤로 기울었다가 세로축을 중심으로 돌아 옆면만 남으며 사라지게 해 줘. 빠르고 깔끔하게.
회전이 입체적으로 보이게 원근감(perspective)을 주고, 회전이 끝난 뒤에 요소를 없애고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

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

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

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

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

요소가 바퀴처럼 왼쪽에서 굴러 들어오며 서서히 나타납니다.

[적용할 곳]에 롤 인(Roll In) 등장 애니메이션을 넣어 줘.
요소가 바퀴처럼 회전하면서 왼쪽에서 굴러 들어오고, 동시에 서서히 나타나게 해 줘. 부드럽게, 도착할 때 느려지게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.

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

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

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

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

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

[적용할 곳]에 로테이트 아웃(Rotate Out) 퇴장 애니메이션을 넣어 줘.
요소가 중심을 축으로 반 바퀴 조금 넘게 돌면서 서서히 사라지게 해 줘. 부드럽게, 갈수록 빨라지게.
회전이 끝난 뒤에 제거하고, 사용자가 모션 줄이기(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)를 켠 사용자에게는 움직임 없이 보여 줘.

요소가 한 점에서 회전하며 커지고 서서히 나타납니다.

[적용할 곳]에 스월 인(Swirl In) 등장 애니메이션을 넣어 줘. swirl in forward라고도 불러.
요소가 한 점에서 원래 크기로 커지면서 한 바퀴를 훌쩍 넘게 돌고, 동시에 서서히 나타나게 해 줘. 처음엔 빠르게, 자리 잡으며 느려지게.
그룹 전체가 아니라 요소 하나에만 한 번 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.

글자가 넓게 벌어진 흐릿한 상태에서 시작해, 나타나면서 보통 자간으로 좁혀집니다.

[적용할 곳]에 트래킹 인(Tracking In) 텍스트 애니메이션을 넣어 줘. text tracking in, letter-spacing in이라고도 불러.
글자가 넓게 벌어진 흐릿한 상태에서 시작해, 완전히 보이게 되면서 보통 자간으로 좁혀지게 해 줘. 부드럽게, 끝에서 느려지게.
자간이 바뀌는 동안 텍스트를 가운데 정렬된 한 줄로 유지해 주변 레이아웃이 밀리지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 보통 자간으로 보여 줘.

요소가 작고 투명한 상태에서 원래 크기로 커지며 서서히 나타납니다.

[적용할 곳]에 줌 인(Zoom In) 등장 애니메이션을 넣어 줘. 스케일 인(scale in)이라고도 불러.
요소가 작고 투명한 상태에서 원래 크기로 커지며 서서히 나타나게 해 줘. 빠르고 부드럽게, 크기가 넘쳤다 돌아오는 느낌 없이.
주변 레이아웃에 영향을 주지 않게 중심에서 확대하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.

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

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