transition 속성

하나의 요소 상태가 변했을 때 이 두 상태의 전이 과정을 부드럽게 처리해주는 기능.

transition-property : 일부 속성의 변화에 대해서만 처리할 수 있고, 모든 요소의 변화에 대하여 처리할 수도 있다. 모든 요소는 'all'값을 주면된다.

transition-duration : 트랜지션이 걸리는 시간, 초 단위

transition-timing-function : 변화의 시간대별 속도를 지정

liner : 처음 속도와 마지막 속도가 일정하다 (예) cubic-bezier(0, 0.1, 1)

ease : 천천히 시작하여 빨라지고 마지막에 다시 느려진다 (예) cubic-bezier(0.25, 0.1, 0.25, 1)

ease-in : 천천히 시작되어 정상 속도가 된다 (예) cubic-bezier(0.42, 0.1, 1)

ease-out : 마지막에 천천히 속도를 줄여 끝낸다 (예) cubic-bezier(0, 0, 0.58, 1)

ease-in-out : 천천히 시작되어 정상 속도가 되었따가 마지막에 느려진다 (예) cubic-bezier(0.42, 0, 0.58, 1)

cubic-bezier(n,n,n,n) : 베지어 곡선값을 만듦으로서 속도를 지정