animation 속성

animation 속성은 애니메이션을 위한 단축 속성으로, 애니메이션에 관한 모든 속성을 한 번에 설정할 수 있습니다: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

값의 순서는 중요하지 않으나, 애니메이션 지속 시간 animation-duration은 반드시 지연 시간 animation-delay보다 앞에 위치해야 합니다. 필수 속성은 오직 animation-name과 animation-duration 뿐입니다.

이 속성은 애니메이션을 완전히 비활성화하는 값 none도 가질 수 있습니다. 이 값이 기본값입니다.

문법

css선택자 {
  animation: 값들;
}

예시

이 예시에서 애니메이션은 (각각의 새로운 재생마다) 3초의 지연 시간을 가진 후, 6초 동안 재생됩니다:

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

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

#elem {
  animation: move 6s infinite 3s linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

예시 . 가능한 문제점

단축 형태로 작성된 애니메이션이 그 이름 때문에 작동하지 않을 수 있습니다. 다음 애니메이션을 살펴보겠습니다:

css@keyframes reverse {
  from {
    left: 0;
  }
  to {
    left: 300px;
  }
}

애니메이션 이름으로 reverse를 사용했습니다. 언뜻 보기에는 모든 것이 괜찮아 보이지만, 이 애니메이션은 작동하지 않습니다. 왜냐하면 reverse는 animation-direction 속성의 유효한 키워드이기 때문입니다.

또한 애니메이션 이름에 다른 키워드를 사용하면 단축 형태에서 애니메이션이 작동하지 않을 것입니다. 하지만 "완전한" 형태로 기술할 때는 모든 것이 잘 작동합니다.

애니메이션을 깨뜨릴 수 있는 키워드 값들로는 animation-direction 관련 키워드 외에도, 이징 함수에 관련된 키워드들, 그리고 infinite, alternate, running, paused 등이 있습니다.

참고 항목