Icon Float Away (아이콘 플로트 어웨이)

마우스를 올리면 아이콘이 아래로 떨어져 사라졌다가 위에서 다시 내려옵니다.

[적용할 곳]에 아이콘 드롭(Icon Drop) 호버 효과를 넣어 줘.
요소 안의 아이콘이 아래로 떨어져 사라졌다가 위에서 제자리로 다시 떨어지게 해 줘. 빠르게, 착지는 부드럽게.
반복하지 말고 포인터가 들어올 때마다 한 번만 재생하고, 라벨과 버튼 크기는 그대로 둬 줘.

마우스를 올리면 버튼 라벨이 밀려 나가고 화살표와 채움 색이 펼쳐지며 들어옵니다.

[적용할 곳]에 인터랙티브 호버 버튼(Interactive Hover Button) 효과를 넣어 줘.
라벨 옆의 작은 점이 커지면서 버튼을 가득 채우는 동안 라벨은 옆으로 밀려나며 사라지고, 화살표가 붙은 라벨이 새 채움 색 위로 밀려 들어오게 해 줘. 부드럽고 빠르게.
버튼 크기는 고정하고 라벨은 내내 읽히게 두고, 키보드 포커스에도 같은 효과를 보여 줘.

복사 아이콘이 체크 표시로 바뀌고, 라벨이 잠시 「복사됨」으로 바뀝니다.

[적용할 곳]에 클립보드 복사 피드백(Copy-to-Clipboard Feedback) 애니메이션을 넣어 줘. 복사됨 상태(copied state), 복사 아이콘에서 체크 표시로(copy icon to checkmark)라고도 불러.
복사 버튼을 누르면 복사 아이콘이 빠르게 작아지며 사라지고 체크 표시가 그려지면서 라벨이 「복사됨」으로 바뀌고, 잠시 뒤 모두 부드럽게 원래대로 돌아오게 해 줘.
바뀌는 동안 버튼 크기를 그대로 두어 아무것도 밀리지 않게 하고, 복사된 상태를 스크린 리더에 알려 줘.

버튼에 마우스를 올리면 안의 아이콘이 한 바퀴 돕니다.

[적용할 곳]에 아이콘 스핀(Icon Spin) 호버 효과를 넣어 줘.
포인터가 들어오면 요소 안의 아이콘이 부드럽게 한 바퀴 돌고, 벗어나면 반대로 돌아오게 해 줘.
버튼 전체가 아니라 아이콘만 돌리고, 키보드 포커스에도 같은 효과를 보여 줘.

마우스를 올리면 화살표나 요소 자체가 몇 픽셀 앞이나 뒤로 밀립니다.

[적용할 곳]에 넛지 포워드 / 백워드(Nudge Forward / Backward) 호버 효과를 넣어 줘. 애로 넛지(arrow nudge)라고도 불러.
포인터가 올라가 있는 동안 화살표가 가리키는 방향으로 살짝 밀리고, 벗어나면 돌아오게 해 줘. 빠르고 작게.
라벨이나 레이아웃은 밀지 말고 화살표만 움직이고, 키보드 포커스에도 같은 효과를 보여 줘.