개요
animationIterationCount 속성은 CSS 애니메이션이 총 몇 번 반복 재생될지를 설정하거나 현재 설정값을 가져오는 데 사용됩니다. JavaScript를 활용하면 사용자 동작에 따라 애니메이션 반복 횟수를 동적으로 변경할 수 있어, 인터랙티브한 웹 페이지를 만들 때 유용하게 활용됩니다.
문법(Syntax)
animationIterationCount 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.animationIterationCount = "number|infinite|initial|inherit"
속성 값
animationIterationCount 속성에 사용할 수 있는 값은 다음과 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | number 애니메이션을 재생할 횟수를 나타내는 숫자 값입니다. 기본값은 1이며, 필요에 따라 소수점 값(예: 0.5)도 지정할 수 있습니다. |
| 2 | infinite 애니메이션이 무한히 반복 재생되도록 설정합니다. |
| 3 | initial 해당 속성을 브라우저의 기본값으로 초기화합니다. |
| 4 | inherit 부모 요소의 속성 값을 상속받아 적용합니다. |
예제
다음은 버튼을 클릭하면 애니메이션 반복 횟수가 1에서 5로 변경되는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: black;
animation: shrink 3s;
animation-timing-function: ease;
animation-iteration-count: 1;
}
@keyframes shrink {
0% {
color: white;
letter-spacing: 1.8em;
}
100% {
color: magenta;
letter-spacing: 0.01em;
}
}
</style>
<script>
function IncreaseIteration(){
document.getElementById("PARA1").style.animationIterationCount=5;
document.getElementById("Sample").innerHTML="애니메이션 반복 횟수가 이제 5로 설정되었습니다";
}
</script>
</head>
<body>
<p id="PARA1">HTML DOM의 animationIterationCount 속성을 활용하면 애니메이션 반복 횟수를 자유롭게 조절할 수 있습니다.</p>
<p>아래 버튼을 클릭하면 위 애니메이션의 반복 횟수가 변경됩니다</p>
<button onclick="IncreaseIteration()">횟수 증가</button>
<p id="Sample"></p>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
횟수 증가 버튼을 클릭하면 애니메이션 반복 횟수가 5로 변경되고, 화면 하단에 안내 문구가 함께 표시됩니다.
