CSS / 애니메이션 / transition / transition-duration - transition이 끝날 때까지 걸리는 시간을 정하는 속성

transition-duration

  • transition-duration로 transition이 끝날 때까지 걸리는 시간을 정합니다.
  • IE는 버전 10부터 지원합니다.

문법

transition-duration: time| initial | inherit
  • 기본값은 0s입니다.
  • 시간 단위는 초(s) 또는 1/1000초(ms)를 사용합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제

  • 체크박스에 체크하면 박스가 커집니다.
  • 첫 번째 박스는 다 커지는데 1초가 걸립니다.
  • 두 번째 박스는 다 커지는데 0.4초가 걸립니다.
<!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;
			}
			input:checked ~ .jb {
				width: 100%;
			}
			.jb1 {
				transition-duration: 1s;
			}
			.jb2 {
				transition-duration: 400ms;
			}
		</style>
	</head>
	<body>
		<input type="checkbox">
		<p>transition-duration: 1s;</p>
		<div class="jb jb1"></div>
		<p>transition-duration: 400ms;</p>
		<div class="jb jb2"></div>
	</body>
</html>

CSS 강좌