Bounce In (바운스 인)

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

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

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

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

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

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

호버가 시작되거나 끝날 때 요소가 탄력 있게 살짝 넘치며 커지거나 작아집니다.

[적용할 곳]에 바운스 스케일(Bounce Scale) 호버 효과를 넣어 줘. 바운스 인/아웃(bounce in / out)이라고도 불러.
요소가 탄력 있게 살짝 커지면서 최종 크기를 잠깐 눈에 띄게 넘었다가 자리 잡고, 포인터가 벗어나면 같은 방식으로 튕기며 돌아오게 해 줘.
주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

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

[적용할 곳]에 바운스 아웃(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)를 켜 두었으면 즉시 전환해 줘.