transition 속성

transition 속성은 부드러운 전환을 위한 단축 속성으로, transition-duration, transition-property, transition-timing-function, transition-delay 속성을 한 번에 지정할 수 있습니다.

구문

선택자 {
	transition: 값;
}

속성의 순서는 중요하지 않지만, 지속 시간(transition-duration)은 지연 시간(transition-delay) 앞에 와야 합니다.

해당 속성을 참조하세요. 기본값: all 0s ease 0s.

none 값은 모든 전환을 취소합니다(즉시 실행됩니다).

블록 위에 마우스를 올리면 3초 동안 아무 일도 일어나지 않습니다(3초 지연 설정). 그 후 2초 동안 블록의 너비가 부드럽게 변경됩니다. 마우스를 치우면 다시 3초 동안 아무 일도 일어나지 않다가 너비가 원래 값으로 부드럽게 줄어듭니다:

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

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