Enjoy Programming

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 |..

네브바에 애니메이션 추가하기. 우선 네브바 버튼중 채팅창 버튼에 notification부분에 애니메이션 효과를 준다. 간단하다 @keyframes를 이용해 0%일때 트랜스폼은 none이고 50%일때 트랜스폼은 Y축으로 trasnlate -5px rotate 180도를 준다 100%일때는 transform을 다시 none으로 만들어 준다. 그런다음 notification속성에 애니메이션을 넣어주면 된다 계속 지속되기 위해 infinite특성을 붙여주자 그리고 네브바에 버튼들이 아래서 차례대로 올라오는 효과를 주자. nav_btn 클래스들에 @keyframes를 이용해 메소드를 하나 만들어 준다 Y축으로 50픽셀 아래서 올라오는 효과인데 transform: trasnlateY(50px)을 keyframes에..