CSS로 애니메이션 재생 횟수 설정하기
CSS에서 애니메이션이 몇 번 반복해서 재생될지 지정하려면 animation-iteration-count 속성을 사용합니다. 숫자 값을 지정하면 해당 횟수만큼 애니메이션이 반복되고, infinite 키워드를 사용하면 페이지가 열려 있는 동안 무한히 반복됩니다.
주요 값
- 숫자 — 애니메이션을 반복할 횟수 (기본값은 1)
- infinite — 애니메이션을 무한히 반복
예제 코드
다음 예제에서는 두 개의 div 요소에 각각 ease와 ease-in 타이밍 함수를 적용하고, 애니메이션을 3번 반복하도록 설정했습니다.
<!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-name: myanim;— 적용할 @keyframes 애니메이션의 이름을 지정합니다.animation-duration: 2s;— 한 사이클이 완료되는 시간을 2초로 설정합니다.animation-direction: alternate-reverse;— 역방향부터 시작해 방향을 번갈아 전환하며 진행합니다.animation-iteration-count: 3;— 애니메이션을 총 3회 반복 재생합니다.@keyframes myanim— 요소의 left 위치가 100px에서 200px로 이동하는 애니메이션을 정의합니다.
브라우저에서 위 코드를 실행하면 노란색 상자가 좌우로 움직이는 애니메이션이 각각 ease와 ease-in 타이밍 함수로 3번씩 재생되는 것을 확인할 수 있습니다. 반복 횟수를 더 늘리거나 infinite로 변경하면 원하는 방식으로 애니메이션을 조절할 수 있습니다.