CSS3 전환 재산권 등록
예
div 요소 위에 마우스를 올려, 점차 테이블의 너비를 변경 :
div
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
}
div:hover {width:300px;}
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
}
div:hover {width:300px;}
»시도
더 많은 예제는이 페이지의 하단에.
브라우저 지원
표의 수치 속성의 버전 번호를 먼저 지원 브라우저를 나타낸다.
즉시 디지털 -webkit- 이어 -ms- 또는 접두어 지원 전 -moz- 우선 브라우저 버전 번호 때문이다.
| 属性 | |||||
|---|---|---|---|---|---|
| transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
정의 및 지침을 속성
전이 속성 속성 (지정된 CSS 속성이 변경 전환 효과를 시작합니다)에 CSS 속성 nametransition 효과를 지정합니다.
정보 : 사용자가 원소를 가리키면 전환 효과는 일반적으로 발생한다.
참고 : 항상 0, 그렇지 않으면 시간을 전이 시간의 속성을 지정, 전환 효과가 없습니다.
| 기본값 : | 모든 |
|---|---|
| 상속 : | 아니 |
| 버전 : | CSS3 |
| 자바 스크립트 구문 : | 오브젝트 .style.transitionProperty = "너비, 높이" |
문법
transition-property: none|all|
property;
| 값 | 기술 |
|---|---|
| 없음 | 어떤 속성은 전환을 얻을 수 없습니다. |
| 모든 | 모든 속성은 전환 효과를 받게됩니다. |
| 재산 | 정의는 쉼표로 구분 전환 효과 CSS 속성 이름 목록을 적용 할 수 있습니다. |
더 많은 예제
전환 효과는 - 두 속성을 변경하려면
, div 요소 위로 마우스를 부드러운 전환 효과와 너비와 높이를 변경합니다.
