[CSS] transition-timing-function

transition-timing-function

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

---

transition-timing-function

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)	베지어 곡선값을 만들어서 속도를 설정합니다.

호환성(Compatibility)

						6	7	8	9	10	11
transition-timing-function	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능

---