CSS3 전환 타이밍 기능 속성
예
처음부터 끝까지 같은 속도로 전환 :
transition-timing-function: linear;
-webkit-transition-timing-function: linear; /* Safari and Chrome */
-webkit-transition-timing-function: linear; /* Safari and Chrome */
»시도
브라우저 지원
표의 수치 속성의 버전 번호를 먼저 지원 브라우저를 나타낸다.
즉시 디지털 -webkit- 이어 -ms- 또는 접두어 지원 전 -moz- 우선 브라우저 버전 번호 때문이다.
| 属性 | |||||
|---|---|---|---|---|---|
| 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- |
정의 및 지침을 속성
전환 타이밍 기능 속성은 전환 효과의 속도를 지정합니다.
이 속성은 그 구간의 속도를 변경하는 전환 효과를 허용한다.
| 기본값 : | 용이함 |
|---|---|
| 상속 : | 아니 |
| 버전 : | CSS3 |
| 자바 스크립트 구문 : | 개체 .style.transitionTimingFunction = "선형" |
문법
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
| 값 | 기술 |
|---|---|
| 선형 | 같은 속도 규정은 전환 효과 종료를 시작합니다 (동일한 입방 베 지어 (0,0,1,1)). |
| 용이함 | 규정 느린 시작하고 빨리 다음 느린 전환 효과 끝 (입방 베 지어 (0.25,0.1,0.25,1)). |
| 용이성에 | (입방 - 베 지어 (0.42,0,1,1)와 동일) 느린 시작의 효과에 경과 규정을 준수해야합니다. |
| 쉽게 아웃 | 느린 전환 효과의 마지막 조항 (해당하는 입방 베 지어 (0,0,0.58,1)). |
| 완화 된 아웃 | 효과 느린 시작 및 종료에 경과 규정 (동일 입방 베 지어 (0.42,0,0.58,1)). |
| 큐빅 베 지어 (N, N,N, N) | 당신은 입방 - 베 지어 함수에서 자신의 값을 정의합니다. 가능한 값은 0-1 사이의 숫자입니다. |
팁 :에 다른 값을 시도 어떻게 작동하는지 이해하기 위해 아래의 예!
더 많은 예제
예
더 나은 다른 값의 기능을 이해하려면 다음 다섯 가지 값을 다섯 가지 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;}
/* Safari */
#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;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Safari */
#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;}
»시도
예
그리고 위의 예,하지만 속도 곡선을 차 베 지어 함수를 지정합니다 :
#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);}
/* Safari */
#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);}
#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);}
/* Safari */
#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);}
»시도