transition-timing-function

transition-timing-function 속성은 요소의 움직임 기능을 정의합니다.

특징	설명
기본 값	ease
상속	안됨
애니메이션	안됨
버전	CSS3

Definition

• transition-timing-function 속성은 요소의 움직임 기능을 정의합니다.

Syntax

transition-timing-function : linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | inherit;

Property

속성 값	설명
linear	처음 속도와 마지막 속도가 일정합니다.
ease	처음엔 천천히 시작하여 빨라지고 마지막에 다시 느려집니다.
ease-in	천천히 시작되어 정상 속도가 됩니다.
ease-out	마지막에 천천히 속도를 줄여 끝납니다.
ease-in-out	천천히 시작되어 정상 속도가 되었다가 마지막에 느려집니다.
step-start	애니메이션을 시작점에서만 표현됩니다.
step-end	애니메이션을 끝점에서만 표현됩니다.
steps(int,start|end)	애니메이션을 단계별로 설정합니다.
cubic-bezier(n,n,n,n)	베지어 곡선값을 만들어서 속도를 설정합니다.
inherit	transition-timing-function의 속성 값을 상위요소한테 상속받습니다.

Compatibility

							6	7	8	9	10	11
transition-timing-function

Sample

linear ease ease-in ease-out ease-in-out step-start step-end steps(4, start) steps(4, end) c-bezier(1, 0.02, 0, 0.98) c-bezier(0, 1.09, 1, 0.03)

마우스 오버시 transition-timing-function가 작동됩니다.