Pop (팝)

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

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

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

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

요소가 뛰는 심장처럼 두 번씩 박동하는 리듬으로 커졌다 작아집니다.

[적용할 곳]에 하트비트(Heartbeat) 효과를 넣어 줘. heart beat라고도 불러.
요소가 빠르게 두 번 부풀었다 풀리고, 다음 박동 전에 잠깐 쉬게 해 줘. 뛰는 심장처럼.
박동 사이의 쉼을 유지한 채 끊김 없이 반복하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.

새 알림이 오면 숫자 배지가 톡 튀어나오거나 통통 튀거나 두근거립니다.

[적용할 곳]에 알림 배지 바운스(Notification Badge Bounce) 애니메이션을 넣어 줘. 배지 팝(badge pop), 핑(ping)이라고도 불러.
새 알림이 오면 숫자 배지가 없던 자리에서 톡 튀어나와 빠르고 탄력 있게 두어 번 튀다가 자리 잡고, 그동안 부드러운 링이 한 번 퍼져 나가게 해 줘.
반복하지 말고 새 알림마다 한 번만 재생하고, 바뀐 숫자를 스크린 리더가 읽어 주게 해 줘.

요소가 안쪽으로 눌렸다가 돌아와, 실제 버튼을 누른 것 같은 느낌을 줍니다.

[적용할 곳]에 푸시(Push) 호버 효과를 넣어 줘.
포인터가 들어올 때마다 요소가 한 번 빠르게 작아졌다가 탄력 있게 원래 크기로 돌아오게, 실제 버튼을 눌러 넣은 것처럼 해 줘.
반복하지 말고 호버마다 한 번만 재생하고, 주변 레이아웃이 밀리지 않게 해 줘.

마우스를 올리면 색이 있는 원이 가운데에서 커지거나 가운데로 줄어들며 요소를 채웁니다.

[적용할 곳]에 레이디얼 필(Radial Fill) 호버 효과를 넣어 줘. 서클 익스팬드(circle expand)라고도 불러.
새 색의 원이 가운데에서 부드럽게 커져 요소를 가득 채우고, 포인터가 벗어나면 다시 가운데로 줄어들게 해 줘. 그동안 라벨 색도 읽히도록 바꿔 주고.
원은 요소 모양 안으로 잘라 넣고 라벨은 그 위에 두고, 키보드 포커스에도 같은 효과를 보여 줘.

마우스를 올리면 요소 안에서 사각형이 커지거나 줄어들며 배경이 바뀝니다.

[적용할 곳]에 렉탱글 필(Rectangle Fill) 호버 효과를 넣어 줘.
안쪽 사각형이 가운데로 줄어들면서 새 배경색이 네 변에서 좁혀 들어오고, 포인터가 벗어나면 다시 열리게 해 줘. 그동안 라벨 색도 읽히도록 바꾸고, 부드럽고 빠르게.
라벨은 채움 위에 두고, 키보드 포커스에도 같은 효과를 보여 줘.