CSS / 애니메이션 / animation / animation-duration - 진행 시간 정하는 속성

animation-duration

  • animation-duration은 애니메이션의 진행 시간을 정하는 속성입니다.
  • 애니메이션 관련 속성은 IE 버전 10 이상에서 사용할 수 있습니다.

문법

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

예제

3초에 걸쳐 박스가 커지는 예제입니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			@keyframes big {
				from {
					width: 0px;
					height: 0px;
				}
				to {
					width: 150px;
					height: 150px;
				}
			}
			div#jb {
				margin: 30px auto;
				background-color: orange;
				animation-name: big;
				animation-duration: 3000ms;
			}
		</style>
	</head>
	<body>
		<div id="jb"></div>
	</body>
</html>

CSS 강좌