예
처음부터 끝까지 같은 속도로 애니메이션을 재생 :
div {
-webkit-animation-timing-function: linear; /* Chrome, Safari,
Opera */
animation-timing-function: linear;
} »그것을 자신을 시도 더 "Try it Yourself" 아래의 예.
정의 및 사용
애니메이션 타이밍 기능은 애니메이션의 속도 곡선을 지정한다.
속도 곡선은 애니메이션이 다른 CSS 스타일 중 하나 세트에서 변경하는 데 사용하는 시간을 정의합니다.
속도 곡선을 원활하게 변경하는 데 사용됩니다.
| 기본값: | ease |
|---|---|
| 상속 : | no |
| 애니메이션 : | no. Read about animatable |
| 번역: | CSS3 |
| 자바 스크립트 구문 : | object .style.animationTimingFunction="linear" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
숫자는 -moz-, -webkit- 다음에, 또는 접두어와 함께 일 첫 번째 버전을 지정 -O-.
| 재산 | |||||
|---|---|---|---|---|---|
| animation-timing-function | 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- |
CSS 구문
animation-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)|initial|inherit; 애니메이션 타이밍 함수는 속도 곡선을 생성하기 위해서는, 큐빅 베 지어 곡선이라 불리는 수학적 함수를 사용한다. 이 기능에 자신의 값을 사용하거나 미리 정의 된 값 중 하나를 사용할 수 있습니다 :
속성 값
| 값 | 기술 | 플레이 |
|---|---|---|
| linear | 애니메이션은 처음부터 끝까지 같은 속도가 | »플레이 |
| ease | 기본값. 천천히 종료되기 전에 애니메이션은 다음 빠르고 느린 시작이 | »플레이 |
| ease-in | 애니메이션은 느린 시작이 | »플레이 |
| ease-out | 애니메이션은 느린 끝이 | »플레이 |
| ease-in-out | 애니메이션은 천천히 시작과 느린 끝을 모두 가지고 | »플레이 |
| step-start | 에 해당 steps(1, start) | |
| step-end | 에 해당 steps(1, end) | |
| steps(int,start|end) | 두 개의 매개 변수와 스텝 기능을 지정합니다. 첫번째 매개 변수 함수의 간격의 수를 지정한다. 이 양의 정수 여야합니다 (greater than 0) . , 선택적인 두 번째 매개 변수 값 중 하나입니다 "start" 또는 "end" , 및 값의 변화가 구간 내에서 발생하는 지점을 지정합니다. 두번째 파라미터가 생략 된 경우, 상기 값이 주어진 "end" | |
| cubic-bezier( n , n , n , n ) | 입방 - 베 지어 함수에서 자신의 값을 정의 가능한 값은 0에서 1까지의 수치입니다 | |
| initial | 기본값으로이 속성을 설정합니다. 초기에 대해 알아보기 | |
| inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
Tip: 아래 그것을 시도 자신 섹션에서 다른 값을보십시오.
더 예
예
더 다른 타이밍 함수 값을 이해;
다음은 다섯 가지이다 <div> 다섯 가지 다른 값을 가진 요소 :
/* For Chrome, Safari and Opera */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
/* Standard
syntax */
#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;}
»그것을 자신을 시도 예
위의 예와 동일하지만, 속도 커브가 큐빅 베 지어 함수로 정의된다 :
/* For Chrome, Safari and Opera */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Standard syntax */
#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);} »그것을 자신을 시도 관련 페이지
CSS3 튜토리얼 : CSS3 애니메이션
HTML DOM 참조 : animationTimingFunction property