CSS animation-iteration-count 속성이란?
CSS에서 animation-iteration-count 속성은 애니메이션이 재생되는 횟수를 지정하는 데 사용됩니다. 이 속성에 숫자 값을 입력하면 해당 횟수만큼 애니메이션이 반복되고, infinite 값을 사용하면 애니메이션을 무한히 반복할 수도 있습니다.
아래 예제 코드를 실행하면 animation-iteration-count 속성이 실제로 어떻게 동작하는지 직접 확인해 볼 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
position: relative;
background-color: yellow;
animation-name: myanim;
animation-duration: 2s;
animation-direction: alternate-reverse;
animation-iteration-count: 3;
}
@keyframes myanim {
from {left: 100px;}
to {left: 200px;}
}
#demo1 {animation-timing-function: ease;}
#demo2 {animation-timing-function: ease-in;}
</style>
</head>
<body>
<div id = "demo1">ease effect</div>
<div id = "demo2">ease-in effect</div>
</body>
</html>코드 설명
위 예제에서는 animation-iteration-count: 3;을 설정하여 노란색 div 요소가 왼쪽 100px 위치에서 200px 위치까지 이동하는 애니메이션을 총 3번 반복하도록 했습니다. 또한 animation-direction: alternate-reverse; 덕분에 각 반복마다 애니메이션 방향이 번갈아 전환되어 자연스러운 왕복 움직임을 만들어 냅니다.
두 개의 div 요소에는 서로 다른 animation-timing-function(ease와 ease-in)이 적용되어 있어, 같은 반복 횟수라도 가속 곡선에 따라 움직임의 느낌이 어떻게 달라지는지 비교해 볼 수 있습니다.