예
전환 효과의 속도 곡선을 변경 :
document.getElementById("myDIV").style.transitionTimingFunction = "linear";
»그것을 자신을 시도 정의 및 사용
transitionTimingFunction 속성 전환 효과의 속도 곡선을 지정한다.
이 속성은 전환 효과는 지속 시간, 속도를 변경할 수 있습니다.
브라우저 지원
transitionTimingFunction 속성은 인터넷 익스플로러 10, 파이어 폭스, 오페라, 그리고 크롬에서 지원됩니다.
Safari는 대안의 WebkitTransitionTimingFunction 속성을 지원합니다.
참고 : transitionTimingFunction 속성은 인터넷 익스플로러 9 및 이전 버전에서는 지원되지 않습니다.
통사론
transitionTimingFunction 속성을 반환합니다 :
object .style.transitionTimingFunction transitionTimingFunction 속성을 설정 :
object .style.transitionTimingFunction ="ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|
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) ) |
| cubic- bezier( n , n , n , n ) | 입방 - 베 지어 함수에서 자신의 값을 정의합니다. 가능한 값은 0에서 1까지의 수치입니다 |
| initial | 기본값으로이 속성을 설정합니다. 초기 읽기에 대한 |
| inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
기술적 세부 사항
| 기본값: | 용이함 |
|---|---|
| 반환 값 : | 소자의 전환 타이밍 기능의 속성을 나타내는 문자열 |
| CSS 버전 | CSS3 |
관련 페이지
CSS 참조 : transition-timing-function property
<스타일 개체