animation-iteration-count

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

animation-iteration-count CSS 속성은 애니메이션 시퀀스가 끝나기 전에 재생되는 횟수를 설정합니다.

시도해보기

모든 애니메이션 속성을 한 번에 설정한다면 단축 속성 animation를 사용하면 편리합니다.

구문

css
/* Keyword value */
animation-iteration-count: infinite;

/* <number> values */
animation-iteration-count: 3;
animation-iteration-count: 2.4;

/* Multiple values */
animation-iteration-count: 2, 0, infinite;

/* Global values */
animation-iteration-count: inherit;
animation-iteration-count: initial;
animation-iteration-count: revert;
animation-iteration-count: revert-layer;
animation-iteration-count: unset;

animation-iteration-count 속성은 값으로 하나 혹은 여러 개의 쉼표로 구분한 값을 지정합니다.

infinite

애니메이션이 계속 반복됩니다.

<number>

애니메이션이 반복되는 횟수입니다. 기본값은 1로 지정되어 있습니다. 애니메이션 주기의 일부분만 재생하기 위해 정수가 아닌 값을 지정할 수 있습니다. 예를 들어, 0.5는 애니메이션 주기의 절반만 재생합니다. 음수 값은 유효하지 않습니다.

참고: animation-* 속성에 여러 개의 쉼표로 구분된 값을 지정하면 animation-name 속성에 지정된 애니메이션에 할당되는 값의 수에 따라 다른 방식으로 지정됩니다. 자세한 내용은 여러 애니메이션 속성 값 설정을 참조하십시오.

참고: CSS 스크롤 기반 애니메이션을 만들 때, animation-iteration-count 속성을 지정하면 타임라인이 진행되는 동안 애니메이션이 해당 횟수만큼 반복됩니다. animation-iteration-count 속성을 지정하지 않으면, 애니메이션은 한 번만 실행됩니다. infinite는 스크롤 기반 애니메이션에서 유효한 값이지만 애니메이션이 작동하지 않게 됩니다.

형식 정의

초기값1
적용대상all elements, ::before and ::after pseudo-elements
상속no
계산 값as specified
Animation typeNot animatable

형식 구문

animation-iteration-count = 
<single-animation-iteration-count>#

<single-animation-iteration-count> =
infinite |
<number [0,∞]>

예제

반복 횟수 설정하기

이 애니메이션은 10번 실행됩니다.

HTML

html
<div class="box"></div>

CSS

css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: 10;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

결과

애니메이션을 확인하려면 직사각형에 마우스를 가져가세요.

다른 예제들은 CSS animations을 참조하세요.

명세서

Specification
CSS Animations Level 1
# animation-iteration-count

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animation-iteration-count
infinite

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

같이 보기