animation-iteration-count 속성

animation-iteration-count 속성은 애니메이션의 반복 횟수를 설정합니다. 기본적으로 애니메이션은 1번만 반복된 후 원래 상태로 돌아갑니다. 이 속성을 사용하면 특정 횟수만큼 반복하거나 무한 반복을 설정할 수 있습니다.

문법

css선택자 {
  animation-iteration-count: 정수 또는 소수 | infinite;
}

값

기본값: 1.

예제 . 유한한 반복 횟수

이 예제에서 애니메이션은 3번만 반복된 후 원래 상태로 돌아갑니다:

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

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

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

Результат:

예제 . infinite 값

이번에는 애니메이션이 무한히 반복됩니다:

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

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

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

Результат:

관련 항목