속성 animation-direction

속성 animation-direction은 애니메이션의 방향을 설정합니다. 기본적으로 애니메이션은 1번만 반복되고 그 후 원래 상태로 돌아간 다음, 지연 시간 animation-delay가 설정되어 있다면 지정된 시간을 기다린 후 사이클이 처음부터 시작됩니다.

이 속성을 사용하면 이 동작을 변경할 수 있습니다, 예를 들어, 애니메이션이 끝난 후 시작 위치로 돌아가지 않고 끝난 곳에 머무르게 할 수 있습니다.

또한 다음과 같은 동작을 설정할 수 있습니다: 애니메이션이 끝점까지 진행되었다가 다시 돌아옵니다 (transition에서와 같이). 아래 설명을 참조하세요.

문법

선택자 {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

값

값	설명
`reverse`	애니메이션이 역방향으로 재생됩니다.
`alternate`	애니메이션이 먼저 정방향으로, 그 다음 역방향으로 재생됩니다 (transition과 유사).
`alternate-reverse`	애니메이션이 끝 위치에서 시작 위치로, 그리고 다시 돌아오며 재생됩니다. 본질적으로 이것은 `alternate` 값과 `reverse` 값을 하나로 합친 것입니다.
`normal`	애니메이션이 시작부터 끝까지 재생되고, 종료 후 시작 위치로 순간이동합니다.

기본값: normal.

예제

지금은 요소가 한 방향으로 움직였다가 다시 돌아올 것입니다, alternate 값이 설정되어 있기 때문입니다. 이때 animation-duration는 3초의 값을 가지며, 이것은 "갈 때"와 "돌아올 때" 이동이 각각 3초 동안 지속된다는 것을 의미합니다:

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

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-direction: alternate;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

예제

지금은 요소가 반대 방향으로 움직일 것입니다 (왼쪽에서 오른쪽으로가 아니라 오른쪽에서 왼쪽으로):

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

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}
			
#elem {
	animation-direction: reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

예제

지금은 요소가 왔다갔다 움직이지만, 반대 방향으로 시작할 것입니다 (왼쪽에서 시작해야 하지만 오른쪽에서 시작할 것입니다):

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

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-direction: alternate-reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

같이 보기

속성 animation-name,
애니메이션 이름을 설정하는 속성
속성 animation-duration,
애니메이션 지속 시간을 설정하는 속성
속성 animation-delay,
애니메이션 실행 전 지연 시간을 설정하는 속성
속성 animation-timing-function,
애니메이션 실행 속도를 설정하는 속성
속성 animation-iteration-count,
애니메이션 반복 횟수를 설정하는 속성
속성 animation-fill-mode,
애니메이션 상태를 설정하는 속성
속성 animation-play-state,
애니메이션을 일시 중지할 수 있게 하는 속성
속성 animation,
애니메이션에 대한 단축 속성
명령어 @keyframes,
애니메이션의 키프레임을 설정하는 명령어
부드러운 전환 transition, 요소에 마우스를 올렸을 때의 애니메이션