CSS 트랜지션-타이밍-퍼션 속성

정의와 사용법

transition-timing-function 속성은 전환 효과의 속도 곡선을 정의합니다.

이 속성은 전환 효과가 시간에 따라 속도를 변경할 수 있도록 합니다.

추가로 참고:

CSS 교육:CSS 전환

HTML DOM 참조 설명서:transitionTimingFunction 속성

예시

예제 1

시작에서 끝까지 일정한 속도로 전환 효과를:

div
{
transition-timing-function: linear;
}

본인이 직접 시도해 보세요

CSS 문법

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

속성 값

값 설명
linear 缓慢으로 시작하여 끝까지의 일정한 속도로 전환 효과를 정의합니다. (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) cubic-bezier 함수에서 자신의 값을 정의합니다. 가능한 값은 0에서 1 사이의 수치입니다.

힌트:다양한 값을 테스트하여 그 작동 원리를 더 잘 이해할 수 있습니다.

기술 세부 사항

기본 값: ease
상속성: 아니요
버전: CSS3
JavaScript 문법: 객체.style.transitionTimingFunction="linear"

더 많은 예제

예제 2

다른 함수 값의 차이를 더 잘 이해하기 위해 다섯 가지 다른 값이 있는 다섯 가지 다른 div 요소를 보세요:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

본인이 직접 시도해 보세요

예제 3

이전 예제와 같지만 cubic-bezier를 통해 속도 곡선을 정의합니다:

#div1 {transition-timing-function: cubic-bezier(0,0,1,1);}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

본인이 직접 시도해 보세요

브라우저 지원

표에 나타난 숫자는 해당 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

-webkit-、-moz- 또는 -o- 뒤에 있는 숫자는 프리퍼스를 사용하는 첫 번째 버전을 나타냅니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-