transition-property 속성

transition-property 속성은 부드러운 전환 transition으로 애니메이션될 속성을 설정합니다. 값으로는 애니메이션될 CSS 속성의 이름을 전달해야 합니다. 값 all을 설정하면 (기본값임) 모든 속성이 한 번에 애니메이션됩니다.

문법

css선택자 {
  transition-property: 값;
}

예시

블록 위에 마우스를 올리면 transition-property가 width 값이기 때문에 블록의 너비가 부드럽게 변경됩니다:

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

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

Результат:

예시 . all 값

이 예시에서 transition-property는 all 값을 가지므로 hover 상태에 대해 작성된 모든 속성(이 경우 width와 height)이 부드럽게 변경됩니다. 모든 변경은 transition-duration에 설정된 동일한 시간 동안 수행됩니다:

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

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

Результат:

참고 항목