HTML DOM 스타일 전환 속성
예
마우스 포인터가 서서히 모양을 변경할 것, div 요소 가리킬 :
document.getElementById("myDIV").style.transition="all 2s";
»시도
정의 및 사용
전이 속성은 네 개의 전환 속성을 설정하는 약식 속성이다 :
transitionProperty, transitionDuration, transitionTimingFunction 및 transitionDelay.
참고 : 항상 설정 transitionDuration 속성을, 그렇지 않으면 시간은 전환 효과를 생산하지 않습니다, 제로이다.
브라우저 지원
인터넷 익스플로러 10, 파이어 폭스, 오페라와 크롬의 전환 속성을 지원합니다.
Safari는 재산의 또 다른 대안은 그 WebkitTransition 속성을 속성을 지원합니다.
참고 : 인터넷 익스플로러 9 이전 버전의 전환 속성을 지원하지 않습니다.
문법
반환 전환 속성 :
object .style.transition
전이 속성을 설정합니다 :
object .style.transition="property duration timing-function delay|initial|inherit"
속성 값
| 值 | 描述 |
|---|---|
| transitionProperty | 规定应用过渡效果的 CSS 属性的名称。 |
| transitionDuration | 规定完成过渡效果需要多少秒或毫秒。 |
| transitionTimingFunction | 规定过渡效果的速度曲线。 |
| transitionDelay | 定义过渡效果何时开始。 |
| initial | 设置该属性为它的默认值。请参阅 initial 。 |
| inherit | 从父元素继承该属性。请参阅 inherit 。 |
기술 세부 사항
| 기본값 : | 모든 0 용이성 0 |
|---|---|
| 반환 값 : | 전이 소자 특성을 나타내는 문자열. |
| CSS 버전 | CSS3 |
관련 기사
CSS 참조 : 전환 등록