CSS 전환 속성 속성

<div> 요소 위로 마우스를 가져간 다음 부드러운 전환 효과로 너비를 변경합니다.

div {
transition-property: width;
}

div:hover {
width: 300px;
}

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

속성은 전환 효과가 적용되는 CSS 속성 의 transition-property이름을 지정합니다(전환 효과는 지정된 CSS 속성이 변경될 때 시작됨).

팁: 전환 효과는 일반적으로 사용자가 요소 위로 마우스를 가져갈 때 발생할 수 있습니다.

참고: 항상 transition-duration 속성을 지정하십시오. 그렇지 않으면 지속 시간이 0이고 전환이 적용되지 않습니다.

기본값:	모두
상속:	아니요
애니메이션 가능:	아니요. 애니메이션 가능 에 대해 읽기
버전:	CSS3
자바스크립트 구문:	개체 .style.transitionProperty="너비, 높이"

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

-webkit-, -moz- 또는 -o- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.

Property
transition-property	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

transition-property: none|all|property|initial|inherit;

Value	Description
none	No property will get a transition effect
all	Default value. All properties will get a transition effect
property	Defines a comma separated list of CSS property names the transition effect is for
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

<div> 요소 위로 마우스를 가져간 다음 부드러운 전환 효과로 너비와 높이를 변경합니다.

div {
transition-property: width, height;
}

div:hover {
width: 300px;
height: 300px;
}