CSS / 애니메이션 / animation / animation-direction - 진행 방향 정하는 속성

animation-direction

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

문법

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit
  • normal : 기본값입니다. 정해진 순서로 진행합니다.
  • reverse : 반대 순서로 진행합니다.
  • alternate : 정해진 순서로 진행했다가 반대 순서로 진행합니다.
  • alternate-reverse : 반대 순서로 진행했다가 정해진 순서로 진행합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제

  • 박스가 커지는 애니메이션입니다.
  • animation-direction의 값을 정하지 않거나 normal로 정하면, @keyframes에서 정한 순서로 애니메이션이 진행됩니다.
<!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: 2s;
				animation-timing-function: linear;
				animation-delay: 0s;
				animation-direction: normal;
			}
		</style>
	</head>
	<body>
		<div id="jb"></div>
	</body>
</html>
  • 값을 reverse로 하면 애니메이션이 반대 방향으로 진행됩니다.
animation-direction: reverse;
  • 값을 alternative로 하면 정방향 진행한 후 역방향으로 진행합니다. 애니메이션 횟수를 늘려야 어떻게 되는 건지 알기 좋습니다.
animation-iteration-count: 2;
animation-direction: alternate;
  • 값을 alternative-reverse로 하면 역방향 진행한 후 정방향으로 진행합니다.
animation-iteration-count: 2;
animation-direction: alternate-reverse;

CSS 강좌