transition-duration 속성

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

구문

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

값

기본값: 0s.

예제

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

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

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

Результат:

함께 보기