[CSS - transition] #1. transition이란?

1. transition이란?

transition이란 CSS 속성을 변경할 때 애니메이션의 속도, 타겟, easing을 관리하게 해 준다.

transition X : 변경한 속성이 즉시 반영
transition O : 변경한 속성이 일정 기간에 걸쳐 반영

2. transition 속성

1. transition
   : 아래에 소개할 속성 4개를 단축하여 사용 할 수 있는 속성!

2. transition-property
   : 어떤 속성에 transition을 적용할 것인지! ex) width, color...

3. transition-duration
   : transition이 일어나는 지속시간!

4. transition-timing-function
   : transition의 시간당 속도! ex) : ease, linear...

5. transition-delay
   : 속성이 변한 시점(ex.hover)과 transition이 시작될 시점 사이의 간격!
   
   

3. 주의할 점

• 아무 속성에나 다 transition을 사용할 수 없음
  : transition의 정의 자체가 애니메이션 속도를 조절하게 해 준다는 것으로 알 수 있듯이 transition은 애니메이션이 가능한 속성에만 적용이 된다!

• 'auto'는 웬만하면 피할 것
  : 브라우저 및 브라우저의 버전에 따라 예상 결과가 다르게 나올 수 있으므로 auto는 피하자!
  
  

4. 마치며

다음 글에서는 transition의 각 속성들에 대해 자세히 알아보고 직접 코딩을 해보며 익혀보자!