[animation] custom animation - animation-play-state

tailwind를 사용하던 중 오랜만에 slide animation을 구현할 일이 생겼다.

 

신규 beta launching 한 사이트 navigation에 text sliding 이다.

 

우선 거두 절미  tailwind에 custom animation은 tailwind config에서

이런식으로 설정 해주면 된다..

 

근데.. 마우스를 올리면 해당 animation을 paused 시키고 싶었다.

 

찾아보니 css property 중에 animation-play-state 라는 것이 존재 했다.

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

animation-play-state - CSS: Cascading Style Sheets | MDN

참고하자. 근데 이걸 어찌쓴다?

tailwind에는 해당 속성이 유틸리티화 되어 있지 않았다..

 

그래서 쓴 꼼수 방법은 global css에

해당 태그에 classname을 설정 후 hover시 paused를 할 수있게 해주었다.

화면 기록 2022-11-07 21.51.44.mov

5.11MB

잘 된다.