CSS로 애니메이션 반복 횟수 지정하기
CSS에서 애니메이션이 몇 번 실행될지 제어하고 싶다면 animation-iteration-count 속성을 사용하면 됩니다. 이 속성을 활용하면 요소에 적용된 애니메이션을 원하는 횟수만큼 반복해서 재생할 수 있습니다.
사용 가능한 주요 값
- 숫자: 애니메이션을 반복할 횟수를 직접 지정합니다. (예:
2,3,5) - infinite: 애니메이션을 무한히 반복 실행합니다.
- initial: 기본값인 1회로 되돌립니다.
- inherit: 부모 요소의 값을 상속받습니다.
예제: 애니메이션 2번 반복하기
다음 예제는 animation-iteration-count 값을 2로 설정하여, 애니메이션이 두 번 실행되도록 만든 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
background-color: yellow;
animation-name: myanim;
animation-duration: 2s;
animation-iteration-count: 2;
}
@keyframes myanim {
from {
background-color: green;
}
to {
background-color: blue;
}
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
코드 설명
위 코드가 실제로 어떻게 동작하는지 단계별로 살펴보겠습니다.
- @keyframes myanim: 배경색이 초록색(
green)에서 파란색(blue)으로 변화하는 애니메이션을 정의합니다. - animation-duration: 2s: 한 번의 애니메이션 사이클이 2초 동안 진행됩니다.
- animation-iteration-count: 2: 애니메이션 전체가 총 2번 반복 실행됩니다.
따라서 화면의 div 요소는 노란색 배경 위에서 2초간 색상 변화 애니메이션을 한 번 재생한 뒤, 다시 한 번 더 재생한 후 멈추게 됩니다.
무한 반복이 필요하다면?
애니메이션을 계속해서 반복 재생하고 싶다면 값을 infinite로 설정하면 됩니다.
animation-iteration-count: infinite;
이처럼 animation-iteration-count 속성 하나만으로 애니메이션의 반복 동작을 자유롭게 제어할 수 있으므로, 로딩 인디케이터나 강조 효과 등 다양한 UI 연출에 유용하게 활용할 수 있습니다.