CSS Transitions

속성을 서서히 변화시키는 속성
transition-property(CSS 속성),
transition-duration(지속되는 기간),
transition-timing-function(가속화되는 방법),
transition-delay(시작되기까지 남은 시간)

+무조건 먼저 transition-property(속성)과 
           transition-duration(기간)을 
  정해야 간단한 전환 만들 수 있다+


*duration*
 전환이 끝날 때까지 걸리는 시간 지정(기본값은 0s)
  ex) transition-property: color;
      transition-duration: 1s;

*delay*
 전환이 시작하기 전 대기 할 시간 지정(기본값은 0s)

*timing-function*
 전환의 진행속도 조절(기본값은 ease,
             전환을 천천히 시작하고 중간에서 속도 높이고 끝에서 느리게)
 ease-in     : 느리게 시작, 빠르게 가속, 갑자기 멈춤
 ease-out    : 갑자기 시작, 느리게, 천천히 끝남
 ease-in-out : 느리게 시작, 중간에서 빨리, 천천히 끝남
 linear      : 전체적으로 일정한 속도
  ex)transition-property: color;
     transition-duration: 1s;
     transition-timing-function: ease-out;
   --> 텍스트 색상은 1초에 걸쳐 애니메이션화되고 
       갑자기 시작되서 끝날 때 느려짐..
       
*shorthand*
 transition 한 줄로 축약하기
 순서대로 property, duration, timing-function, delay !!
  ex) transition: color 1.5s linear 0.5s
      --> 0.5초 지연되고 1.5초 동안 일정한 속도로 텍스트 색상의 변경
          전환됨
      4개 중 하나를 그대로 두면-기본값 적용
     but!! delay적용하려면 duration 무조건 설정!
     
*combination*
 transition 결합하기
 세미콜론(;)앞에 쉼표(,) 추가
  ex) transition: color 1s linear,
      font-size 750ms ease-in 100ms;
      --> 텍스트 색상은 지연없이 일정한 속도로 1초동안 전환되며
          글꼴 크기는 100밀리초 지연되어 ease-in 750밀리초 동안 전환
          
*all*
 transition-property 값에 all 지정하면 모든 속성에 대해 동일한 값
 (기간, 타이밍 기능 및 지연)이 설정 가능하다!
  ex) transition: all 1.5s linear 0.5s;
      --> 모든 변경 사항은 일정한 속도로 0.5초 지연 후 1.5초 동안 
          애니메이션된다!