부드럽게 hover 애니메이션 넣기

css의 :not() 선택자를 활용해보자

Table Of Contents

들어가기

  • hover 상태가 될 때 / hover 상태에서 벗어날 때 양 쪽에 부드러운 애니메이션을 주기 위한 방법을 서술합니다.
  • 저는 :not() 가상 선택자를 사용했지만, 더 좋은 방법이 있다면 알려주세요!

스르륵~ 움직이게 해주세요

디스콰이엇을 구경하다가 아이템에 마우스를 올리면 hover 애니메이션이 들어가는 걸 보고 내 블로그에도 애니메이션을 적용시키고 싶어졌다.

예시

디스콰이엇에서는 아이템에 hover시 이렇게 애니메이션이 적용된다.

1차 시도 (실패)

  "&:hover": {
    "boxShadow": "4px 4px 15px 5px rgba(78, 120, 97, 0.3)",
    "transform": "translateY(-0.25rem)",
    "transition": "transform 0.1s ease-in-out"
  }

나는 @emotion/react를 써서 스타일링을 하고 있기 때문에 이런 식으로 스타일을 적용시켜 준다. 기본적으로 box-shadow가 들어가 있지만, hover시에 그림자가 더 진해지게 만들고 싶어서 box-shadow 설정을 추가로 넣어줬다.

before

실행 시에는 이렇게 보인다. hover시에 부드럽게 올라가는 부분은 잘 되지만, 마우스가 나갈 때에는 &:hover로 선택할 수 없기 때문에 translateY 속성이 -0.25rem에서 0으로 순식간에 변하게 된다. 반쯤은 성공했지만... 나머지 반이 너무 거슬린다!

2차 시도 (성공)

  ":not(:hover)": {
    "transform": "translateY(0)",
    "transition": "transform 0.1s ease-in-out"
  }

:hover 선택자 아래에 :not(:hover) 선택자를 추가했다. :not() 선택자는 괄호 안의 매개변수 요소를 제외한 모든 요소의 스타일을 지정하기 때문에, hover중이 아닌 요소를 선택할 수 있다. 따라서 hover 상태가 아니게 되는 시점부터 transition을 적용할 수 있는 것이다!

after

내려가는 것도 끊기지 않고 자연스럽게 움직인다.