transition-duration 속성

transition-duration 속성은 전환 효과 transition의 지속 시간을 설정합니다.

구문

선택자 {
	transition-duration: s 또는 ms 단위의 시간;
}

값

값	설명
`s`	초 단위로 시간을 지정합니다 (예: `3s`). `0.5s`와 같은 소수 값도 지정할 수 있습니다.
`ms`	밀리초 단위로 시간을 지정합니다 (예: `3ms`). 1초는 `1000`밀리초입니다.

기본값: 0s.

예제

블록 위에 마우스를 올리면 2초 동안 너비가 부드럽게 변경됩니다.

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

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

함께 보기

전환 효과를 적용할 속성 이름을 지정하는 transition-property 속성
전환 효과 시작 전 지연 시간을 지정하는 transition-delay 속성
전환 효과의 시간 함수를 지정하는 transition-timing-function 속성
전환 효과를 위한 단축 속성인 transition 속성
애니메이션을 만들 수 있는 animation 속성