transition-property 속성

transition-property 속성은 부드러운 전환 transition으로 애니메이션될 속성을 설정합니다. 값으로는 애니메이션될 CSS 속성의 이름을 전달해야 합니다. 값 all을 설정하면 (기본값임) 모든 속성이 한 번에 애니메이션됩니다.

문법

선택자 {
	transition-property: 값;
}

예시

블록 위에 마우스를 올리면 transition-property가 width 값이기 때문에 블록의 너비가 부드럽게 변경됩니다:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-duration: 2s;
	transition-property: width;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

예시 . all 값

이 예시에서 transition-property는 all 값을 가지므로 hover 상태에 대해 작성된 모든 속성(이 경우 width와 height)이 부드럽게 변경됩니다. 모든 변경은 transition-duration에 설정된 동일한 시간 동안 수행됩니다:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-duration: 2s;
	transition-property: all;
	height: 25px;
	width: 100px;
}
#elem:hover {
	height: 50px;
	width: 400px;
}

참고 항목

부드러운 전환의 지속 시간을 설정하는 속성 transition-duration
부드러운 전환 전 지연 시간을 설정하는 속성 transition-delay
부드러운 전환을 위한 타이밍 함수를 설정하는 속성 transition-timing-function
부드러운 전환을 위한 단축 속성인 transition
애니메이션을 만들 수 있는 속성 animation