transition-delay 속성

transition-delay 속성은 transition 전환 효과가 시작되기 전의 지연 시간을 설정합니다.

구문

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

값

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

기본값: 0s.

예시

블록에 마우스를 올리면 3초 동안 아무런 변화가 없고 (3s 지연 설정), 그 후 2초 동안 너비가 부드럽게 변경됩니다. 마우스를 치우면 다시 3초 동안 아무런 변화가 없다가 너비가 원래 값으로 부드럽게 줄어듭니다:

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

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

예시

블록에 마우스를 올리면 먼저 너비가 2초 동안 변경되고, 그 후 높이가 4초 동안 변경됩니다. 속성들은 순차적으로 변경되는데, 높이 변경에는 3초의 지연(너비 변경 시간)이 설정되어 있기 때문입니다. 마우스를 치우면 변화가 역순으로 발생합니다: 먼저 너비가 줄어들고, 그 후 높이가 줄어듭니다:

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

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

함께 보기

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