[Java Script + CSS] js와 css로 간단한 toggle animation 만들기

Vanilla js와 css로 부드럽게 움직이는 toggle button을 만들어보자! Preview On HTML On CSS 뒷 배경, 글자, 버튼 세개가 같은 위치이기 때문에 z-index로 조정한다. 낮을수록 더 뒤(바닥)에 위치하고, 가장 높은 것이 가장 앞에 위치하여 뒤에 있는 요소를 가릴 수 있다. z-index 속성이 동작하려면 반드시 position 속성을 작성해야한다!! absolute로 하면 transform이 먹지 않아서 버튼만 relative로 두었다. 스타일이 변경될 때 휙 휙 변경되는것이 아니라 천천히 변경되어 애니메이션 효과를 주고 싶은 경우 transition 속성을 설정하면 된다!! 지속 시간, 베지어 모양(프리미어나, 에펙 써본 사람은 키프레임에서 베지어 모양 생각하면 ..