예
이상 마우스를 올려 <div> 점진적으로 100 픽셀에서 300 픽셀로 너비를 변경할 요소를 :
div
{
width: 100px;
-webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
}
»그것을 자신을 시도 더 "Try it Yourself" 아래의 예.
정의 및 사용
전이 속성은 네 개의 전환 속성에 대한 약식 속성이다 :
전이 특성, 전이 기간, 전환 타이밍 기능, 및 전환 지연.
Note: 항상 그렇지 기간이 0이고, 전이 - 시간 특성을 지정하고, 전환이 영향을 미치지 않는다.
| 기본값: | all 0s ease 0s |
|---|---|
| 상속 : | no |
| 애니메이션 : | no. Read about animatable |
| 번역: | CSS3 |
| 자바 스크립트 구문 : | object .style.transition="all 2s" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
숫자는 -webkit-, -moz- 다음 또는 접두어와 함께 일 첫 번째 버전을 지정 -O-.
| 재산 | |||||
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- | 10.0 | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -O- |
CSS 구문
transition:property duration timing-function delay|initial|inherit;속성 값
| 값 | 기술 |
|---|---|
| transition-property | 전환 효과가있는 CSS 속성의 이름을 지정합니다 |
| transition-duration | 전환 효과를 완료하는 데 걸리는 초 또는 밀리 초 단위로 지정 |
| transition-timing-function | 전환 효과의 속도 곡선을 지정 |
| transition-delay | 전환 효과를 시작할 때 정의 |
| initial | 기본값으로이 속성을 설정합니다. 초기에 대해 알아보기 |
| inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
더 예
예
경우 <input type="text"> 포커스를받을 점차적으로 100 픽셀 250 픽셀까지의 폭을 변경 :
input[type=text] {
width: 100px;
-webkit-transition: ease-in-out, width .35s ease-in-out; /* Safari 3.1 to 6.0 */
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
} »그것을 자신을 시도 관련 페이지
CSS 자습서 : CSS3 전환
HTML DOM 참조 : transition property