[CSS3] Animated Sidebar 만들기

 이 효과 역시도, :checked를 활용하면 간단하게 만들 수 있다. 

기본정보

1. Animation과 연관된 속성으로 transition과 tranform이 있다.  

2. Transform은 화면 상에서의 위치, 크기, 회전각도 등을 조절한다. 각각 translate(X, Y), scale, rotate를 사용함으로써 가능하다. 그 외에도 matrix, matrix 3d, perspective, perspective-origin, transform-origin, transform-style를 사용할 수 있다.  

3. Transform이 변화를 주는 요소였다면, Transition은 변화가 일어나는 속도, 변화시킬 요소, 움직이는 방법을 결정할 수 있다. 

1) :checked 이전


사이드바로 활용할 요소를 translateX(마이너스 단위) 속성을 주어, 화면에 안보이게 할 것.

check 상태를 확인하는 button은 display : none 처리하여, 화면에 안보이게 할 것.

2) :checked 이후


사이드바로 활용할 요소를 translateX(플러스 단위) 속성을 주어, 화면에 보이게 할 것.

 

See the Pen Animation-Sidebar by joonho lee (@goldycoder) on CodePen.