CSS 참조 가이드

CSS @규칙(RULES)

CSS 속성 전체

CSS unicode-bidi 속성 CSS3 transition-property 속성

CSS3 transition-timing-function 속성 사용 방법 및 예제

transition-timing-function CSS 속성은 트랜지션 효과의 속도를 지정합니다. 이 속성은 지속 시간의 속도를 변경할 수 있는 트랜지션 효과를 허용합니다.

다음 표는 이 속성의 사용 설명과 버전 기록, 그리고 이 속성이 JavaScript 스크립트에서 사용하는 문법을 설명합니다.

기본 값:	ease
적용:	모든 요소::before와::after pseudo 요소
thừa kế:	없음
애니메이션 가능:	아니요.참조: 애니메이션 속성。
버전:	CSS3의 새 기능
JavaScript 문법:	object.style.transitionTimingFunction="ease"-in"

transition-timing-function의 사용 문법

이 속성의 문법은 다음과 같습니다：

transition-timing-function:　linear　|　ease　|　ease-in　|　ease-out　|　ease-in-out　|　cubic-bezier(n,n,n,n)　|　initial　|　inherit

아래 예제는 transition을 사용하는 방법을 보여줍니다.-timing-function 속성.

예제

button　{
　　　　background:　#fd7c2a;
　　　　/*　Safari용　3.0+　*/
　　　　-webkit-transition-property:　background;
　　　　-webkit-transition-duration:　2s;
　　　　　　-webkit-transition-timing-function:　linear;
　　　　
　　　　transition-property:　background;
　　　　transition-duration:　2s;
　　　　　　transition-timing-function:　linear;
}
button:hover　{
　　　　background:　#3cc16e;
}

테스트를 보세요‹/›

속성 값

아래 표는 이 속성의 값을 설명합니다.

값	설명
linear	초기 상태에서 최종 상태로 일정한 속도로 이동합니다.
ease	입출력과 유사하지만, 시작 부분에서 더 빠르게 가속되고 중간 부분에서 이미 감속하기 시작합니다.
ease-in	이동이 느리게 시작하고 점차 가속되어 최종 상태에 도달하고 그다음 이동이 갑자기 멈축됩니다.
ease-out	이동이 빠르게 시작하고 최종 상태에 접근할 때 점차 느리게 됩니다.
ease-in-out	최종 상태로 이동할 때, 이동이 시작될 때 느리게 시작하고 점차 가속되어 그다음 점차 감속합니다.
cubic-bezier(n,n,n,n)	삼차 베塞尔 곡선을 정의합니다. 또는 속도 곡선으로도 알려져 있습니다. 가능한 값은 0에서1사이의数值.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 transition을 사용합니다.-timing-function 속성 값.

브라우저 호환성

transition-timing-function 속성의 브라우저 호환성을 확인하려면 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다. 모든 주요 브라우저는 이 속성을 지원합니다.

	파이어폭스 4+ ^-moz-，16 + 구글 크롬 4+ ^-webkit-，26 + 인터넷 익스플로러 10+ 애플 사파리 3.1+ ^-webkit-，6.1+ 오페라 10.5+ ^-o-，12.1+

추가로 읽어보세요

다음 튜토리얼을 참조하십시오:CSS3 Transitions。

CSS unicode-bidi 속성 CSS3 transition-property 속성