속성 animation-direction

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

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

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

문법

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

값

기본값: normal.

예제

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

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

css@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;
}

Результат:

예제

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

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

css@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;
}

Результат:

예제

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

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

css@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;
}

Результат:

같이 보기