예
처음부터 끝까지 같은 속도와 전환 효과 :
div {
-webkit-transition-timing-function: linear; /* Safari and Chrome */
transition-timing-function: linear;
}
»그것을 자신을 시도 정의 및 사용
전환 타이밍 기능 속성 전환 효과의 속도 곡선을 지정한다.
이 속성은 전환 효과는 지속 시간 동안 속도를 변경할 수 있습니다.
| 기본값: | ease |
|---|---|
| 상속 : | no |
| 애니메이션 : | no. Read about animatable |
| 번역: | CSS3 |
| 자바 스크립트 구문 : | object .style.transitionTimingFunction="linear" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
숫자는 -webkit-, -moz- 다음 또는 접두어와 함께 일 첫 번째 버전을 지정 -O-.
| 재산 | |||||
|---|---|---|---|---|---|
| transition-timing-function | 26.0 4.0 -webkit- | 10.0 | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -O- |
CSS 구문
transition-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;속성 값
| 값 | 기술 |
|---|---|
| ease | 기본값. 느린 시작과 전환 효과, 다음 빠르고 서서히 끝을 지정합니다 (equivalent to cubic-bezier(0.25,0.1,0.25,1) ) |
| linear | 끝 처음부터 같은 속도로 전환 효과를 지정합니다 (equivalent to cubic-bezier(0,0,1,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) ) |
| 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 Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
/* Standard
syntax */
#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;}
»그것을 자신을 시도 예
위의 예와 동일하지만, 속도 곡선은 입방 - 베 지어 함수로 지정됩니다
/* For Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Standard syntax */
#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);}
»그것을 자신을 시도 관련 페이지
CSS 자습서 : CSS3 전환
HTML DOM 참조 : transitionTimingFunction property