transition과 overflow

overflow 속성은 박스의 폭이 높이를 초과하는 내부요소를 처리하기 위해 쓰인다.

.box {
	overflow: hidden; //넘친 부분을 숨김
     	overflow: scroll; //넘친 부분을 보기 위해 스크롤바가 생김
     	overflow: visible; //넘치는 부분을 그대로 보여줌
}

 

transition 속성은 css 속성을 서서히 변화시킨다. 

.box {
  opacity : 0; //여기서 opacity는 투명도 이며 0부터 1까지 있음
  transition : all 1s;
}

위와 같이 쓰며, ".box 클래스의 모든 것을 1초동안 변화시켜라" 라는 뜻이다. all이 아니라 opacity처럼 써서 하나만 변화시킬 수도 있다.

transition에는 여러가지 속성이 있다. 아래처럼 세부조정도 가능하다.

.box {
  transition-delay: 1s; /* 시작 전 딜레이 */
  transition-duration: 2s; /* transition 작동 속도 */
  transition-property: opacity; /* 어떤 속성에 transition 입힐건지 */
  transition-timing-function: ease-out; /* 동작 속도 그래프조정 */
}

 

애니메이션 만드는 법칙을 배웠는데,

1. 시작스타일 정하기

2. 최종스타일 정하기

3. 언제 최종스타일로 변할지 정하기

4. transition 으로 서서히 동작하게 하기

의 순서로 짜면 쉽다고 하니 유의하자!