Bounce Scale (바운스 스케일)

요소가 빠르게 커졌다가 톡 튕기듯 제자리로 돌아옵니다.

[적용할 곳]에 팝(Pop) 호버 효과를 넣어 줘.
포인터가 들어올 때마다 요소가 한 번 빠르게 부풀었다가 원래 크기로 돌아오게, 작게 톡 튕기는 느낌으로 해 줘.
커진 상태로 멈추거나 반복하지 말고 호버마다 한 번만 재생하고, 주변 레이아웃이 밀리지 않게 해 줘.

포인터가 올라가 있으면 요소가 부드럽게 살짝 커집니다.

[적용할 곳]에 그로우(Grow) 호버 효과를 넣어 줘. 스케일 업(scale up)이라고도 불러.
포인터가 올라가 있는 동안 요소가 부드럽게 살짝 커지고, 벗어나면 원래 크기로 돌아오게 해 줘. 빠르고 은은하게.
주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에도 같은 효과를 보여 줘.

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

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

누르는 동안 요소가 살짝 작아지고, 손을 떼면 탄력 있게 돌아옵니다.

[적용할 곳]에 프레스(Press (Button Tap Scale)) 효과를 넣어 줘. 탭 피드백(tap feedback), 프레스 상태(press state)라고도 불러.
누르는 동안 요소가 살짝 작아지고 약간 어두워졌다가, 손을 떼면 작게 튕기며 원래 크기로 돌아오게 해 줘. 빠르고 은은하게.
키보드로 누를 때와 터치할 때도 똑같이 반응하게 하고, 주변 레이아웃이 밀리지 않게 해 줘.

강조 배경이 그리드 안의 카드 사이를 미끄러지듯 옮겨 다니며 마우스를 올린 카드를 따라갑니다.

[적용할 곳]에 카드 호버 효과(Card Hover Effect)를 넣어 줘. 슬라이딩 하이라이트 카드 그리드(sliding highlight card grid)라고도 불러.
마우스를 올린 카드 뒤에 부드러운 강조 배경이 나타나고, 포인터가 다른 카드로 옮겨 가면 그쪽으로 매끄럽게 미끄러져 가며, 포인터가 그리드를 벗어나면 서서히 사라지게 해 줘.
키보드 포커스로도 강조 배경이 똑같이 움직이게 하고, 카드 자체는 밀리지 않게 해 줘.

부드러운 원형 빛이 포인터를 따라 카드 표면을 움직이며 아래 배경을 드러냅니다.

[적용할 곳]에 카드 스포트라이트(Card Spotlight) 효과를 넣어 줘. 스포트라이트 호버(spotlight hover), 포인터 글로우(pointer glow), 마우스 추적 글로우(mouse-following glow), 방사형 그라디언트 호버(radial gradient hover)라고도 불러.
부드럽고 희미한 원형 빛이 포인터를 따라 카드 표면을 움직이고, 포인터가 들어오면 서서히 나타났다가 벗어나면 사라지게 해 줘.
글자가 잘 읽히도록 빛은 카드 내용 뒤에 두고, 터치 기기에서는 카드를 그냥 비추지 않은 채로 둬 줘.

마우스를 올리면 요소의 한 모서리가 책장을 넘기듯 말려 올라갑니다.

[적용할 곳]에 컬(Curl) 호버 효과를 넣어 줘. 페이지 컬(page curl)이라고도 불러.
요소의 한 모서리가 책장을 넘기듯 부드럽게 말려 올라가 접힌 뒷면이 보이고, 포인터가 벗어나면 다시 평평해지게 해 줘.
중요한 내용을 가리지 않게 접힌 부분은 작게 두고, 키보드 포커스에도 같은 효과를 보여 줘.