CSS / 애니메이션 / transition / transition-property - transition이 적용될 속성 정하는 속성

transition-property

  • transition-property로 transition이 적용될 속성을 정합니다.
  • IE는 버전 10부터 지원합니다.

문법

transition-property: none | all | property | initial | inherit
  • none : 모든 속성에 적용하지 않습니다.
  • all : 모든 속성에 적용합니다.
  • property : 속성을 정합니다. 여러 개의 속성을 지정할 경우 쉼표로 구분합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제

  • 체크박스에 체크하면 width, border-radius, background-color의 속성 값이 바뀝니다.
  • 첫 번째 박스는 모든 속성에 애니메이션 효과가 적용됩니다.
  • 두 번째 박스는 width와 background-color에만 애니메이션 효과가 적용됩니다. border-radius는 체크하자마자 적용됩니다.
<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			body {
				font-family: Consolas, monospace;
			}
			.jb {
				box-sizing: border-box;
				width: 64px;
				height: 64px;
				margin: 10px 0px;
				background-color: orange;
				transition-duration: 4s;
			}
			input:checked ~ .jb {
				width: 100%;
				border-radius: 20px;
				background-color: red;
			}
			.jb1 {
				transition-property: all;
			}
			.jb2 {
				transition-property: width, background-color;
			}
		</style>
	</head>
	<body>
		<input type="checkbox">
		<p>transition-property: all</p>
		<div class="jb jb1"></div>
		<p>transition-property: width, background-color</p>
		<div class="jb jb2"></div>
	</body>
</html>

CSS 강좌