CSS transition

CSS transition은 CSS 속성을 변경할 때 애니메이션의 속도를 조절하고 변화를 부드럽게 해준다.

 

transition: <property> <duration> <timing-function> <delay>;

위와 같이 사용한다.

 

property

transition을 적용할 CSS 속성의 이름을 지정한다. 여러 개의 속성을 지정할 경우 쉼표로 구분한다.

속성 이름 대신 none(모든 속성에 적용하지 않음), all(모든 속성에 적용함), initial(기본값으로 설정), inherit(부모 엘리먼트의 속성값 상속)을 사용할 수 있다.

 

duration

transition이 끝날 때까지 걸리는 시간을 지정한다. 기본값은 0s다. 

시간 대신 initial(기본값으로 설정), inherit(부모 엘리먼트의 속성값 상속)을 사용할 수 있다.

 

timing-function

속성의 중간값을 계산하는 함수를 정의한다. 기본값은 ease다.

ease	cubic-bezier( 0.25, 0.1, 0.25, 1 )과 동일
linear	cubic-bezier( 0, 0, 1, 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 )과 동일
steps( n, start | end )	n단계로 나누어서 변화 start 또는 end를 입력하지 않으면 end로 처리
step-start	steps( 1, start )
step-end	steps( 1, end )
cubic-bezier( n, n, n, n )

 

delay

transition이 시작하는 시간을 미룰 수 있다.