CSS3 애니메이션 타이밍 기능 속성
예
시작은 같은 속도로 완료에서 애니메이션을 재생 :
animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */
-webkit-animation-timing-function:linear; /* Safari and Chrome */
»시도
더 많은 예제는이 페이지의 하단에.
브라우저 지원
| 属性 | |||||
|---|---|---|---|---|---|
| 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 스타일 시트에서 속도 곡선 정의 영화.
속도 곡선을 매끄럽게 변경하는 데 사용된다.
| 기본값 : | 용이함 |
|---|---|
| 상속 : | 아니 |
| 버전 : | CSS3 |
| 자바 스크립트 구문 : | 개체 object.style.animationTimingFunction = "선형" |
문법
animation-timing-function:value;
수학 함수 애니메이션 타이밍 기능의 사용, 큐빅 베 지어 곡선의 속도 곡선이라. 이 기능을 사용하면 자신의 값을 사용하거나 미리 정의 된 값 중 하나를 사용할 수 있습니다 :
| 값 | 기술 | 테스트 |
|---|---|---|
| 선형 | 처음부터 애니메이션 같은 속도로 완료합니다. | 테스트 |
| 용이함 | 기본. 애니메이션은 낮은 속도로, 다음, 속도 끝에서 천천히 시작했다. | 테스트 |
| 용이성에 | 애니메이션은 저속에서 시작한다. | 테스트 |
| 쉽게 아웃 | 로우 엔드에서 애니메이션. | 테스트 |
| 완화 된 아웃 | 저속에서 애니메이션의 시작과 끝. | 테스트 |
| 큐빅 베 지어 (N, N,N, N) | 자신의 가치 입방 - 베 지어 함수. 가능한 값은 0-1 값에서 있습니다. |
팁 : 다음 "시도"함수는 다른 값을 사용하십시오.
온라인 예
예
더 다른 타이밍 함수 값을 이해하기 위해, 다섯 가지 DIV 요소 다섯 가지 값들의 세트를 제공한다 :
/* W3C and Opera: */
#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;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari and Chrome: */
#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;}
#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;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari and Chrome: */
#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;}
»시도
예
다음은 앞의 예와 동일하지만,이 속도 곡선 입방 베 지어 함수에 의해 정의된다 :
/* W3C and Opera: */
#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);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#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);}
#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);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#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);}
»시도
관련 기사
CSS3 튜토리얼 : CSS3 애니메이션