transition

transition
   property
     - transition을 적용시킬 속성
     - all로 작성하면, 모든 속성에 대해 적용

   duration
     - transition이 얼마 동안 일어나는지를 설정
     - 단위 : ms, s(1000ms=1s) 

   timing-function(생략 가능)
     - 변화의 속도에 대해 지정
     - ease-in : 느리게 시작하지만, 나중에 속도 빨라짐
       ease-out : 빨리 시작하지만, 나중에 천천히 바뀜
       ease-in-out : 느리게 시작한 뒤, 느려지면서 종료
       cubic-bezier() : 변화의 속도를 제어하고 싶을 때
            - google에 cubiz-bezier 검색한 뒤, 홈페이지에서
              제어 가능

   delay(생략 가능)
         - 입력한 시간 뒤에 애니메이션 작동

      transition은 자동으로 발생하는 것이 아닌, :hover 등 
      가상 클래스 선택자나 js의 액션에 의해 이벤트가 발생
      

   ex) .active{
            transition : font-size(font-size에 변화가 일어날 때, transition이 적용됨)
                           2500ms(2500ms동안 발생)
                           ease-in
                           1s
         }

   ex2) 각 요소를 따로 적용시키고 싶을 경우
             {
                font-size 1000ms ease-out, background-color
                2000ms cubiz-bezier(...) 
                // 쉼표를 이용하면 각 요소에 대해 따로 transition 조정 가능
             }