CSS animation-timing-function 속성

정의와 사용법

animation-timing-function 애니메이션의 속도 곡선을 지정합니다。

속도 곡선은 애니메이션이 하나의 CSS 스타일에서 다른 스타일로 변환되는 데 걸리는 시간을 정의합니다。

속도 곡선은 변화를 더 부드럽게 만듭니다。

다른 것을 참조하세요：

CSS3 강의：CSS 애니메이션

HTML DOM 참조 문서：animationTimingFunction 속성

예제

예제 1

아니면 동일한 속도로 애니메이션을 재생합니다：

div
{
animation-timing-function:2s;
}

직접 경험해보세요

예제 2

다양한 타이밍 함수 값에 대한 더 나은 이해를 위해 다섯 가지 다른 값을 설정한 다섯 가지 다른 div 요소를 제공합니다：

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

직접 경험해보세요

예제 3

이전 예제와 동일하지만, cubic-bezier 함수를 통해 속도 곡선을 정의합니다:

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

직접 경험해보세요

CSS 문법

animation-timing-function: value;

animation-timing-function은 세미클릭 베이저(Cubic Bezier) 함수라는 수학 함수를 사용하여 속도 곡선을 생성합니다. 이 함수에서는 자신의 값을 사용할 수도 있고, 사전 정의된 값을 사용할 수도 있습니다:

값 설명 테스트
linear 애니메이션의 시작에서 끝까지의 속도는 동일합니다. 테스트
ease 기본. 애니메이션은 느리게 시작하고, 빠르게 되고, 끝전에 느리게 됩니다. 테스트
ease-in 애니메이션은 시작에서 느리게 시작합니다. 테스트
ease-out 애니메이션은 끝에서 느리게 끝납니다. 테스트
ease-in-out 애니메이션은 시작과 끝에서 느리게 시작합니다. 테스트
cubic-bezier(n,n,n,n) cubic-bezier 함수에서 자신의 값을 사용합니다. 가능한 값은 0에서 1 사이의 수치입니다.

힌트:아래의 "직접 경험해보세요" 기능에서 다른 값을 사용해 보세요.

기술 세부 사항

기본 값: ease
상속성: no
버전: CSS3
JavaScript 문법: object.style.animationTimingFunction="linear"

브라우저 지원

표에서의 숫자는 이 속성을 완전히 지원하는 최초 브라우저 버전을 나타냅니다.

가 -webkit-、-moz- 또는 -o-를 포함한 숫자는 프리픽스를 사용하는 최초 버전을 의미합니다.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-