transition-delay 속성

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

구문

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

값

기본값: 0s.

예시

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

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

css#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초의 지연(너비 변경 시간)이 설정되어 있기 때문입니다. 마우스를 치우면 변화가 역순으로 발생합니다: 먼저 너비가 줄어들고, 그 후 높이가 줄어듭니다:

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

css#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;
}

Результат:

함께 보기