CSS 메뉴바 숨김, 펼침 스르륵 효과

BBIYAC·2022년 11월 16일
0

TIL

목록 보기
12/16
post-thumbnail

메뉴바 부드럽게 숨김, 펼침 애니메이션

transform: translateX(이동할 위치);
transition: transform 300ms cubic-bezier(0.4, 0, 0,2, 1);
  • 수평으로 접었다 펴는 효과: translateX
  • 수직으로 접었다 펴는 효과: translateY

js 파일에서 클릭 이벤트로 클래스명을 toggle 시켜 숨겼을 때와 펼쳤을 때 각각 css 적용


Reference
👉 CSS transition 활용 Tip (부드러운 움직임)
👉 cubic-bezier 에 대해서 이보다 잘 정리할 수 없다

profile
어제의 나보다 성장한 사람이 되자 :)

0개의 댓글