animationIterationCount 예제
<style>
#hz {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: hzmove 2s 1; /* Chrome, Safari, Opera */
animation: hzmove 2s 2;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes hzmove {
from {left: 0px;}
to {left: 200px;}
}
@keyframes hzmove {
from {left: 0px;}
to {left: 200px;}
}
</style>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.getElementById("hz").style.WebkitAnimationIterationCount = "infinite"; // Code for Chrome, Safari, and Opera
document.getElementById("hz").style.animationIterationCount = "infinite";
}
</script>
<div id="hz"></div>
결과보기
animationIterationCount 정의
애니메이션 반복횟수 지정.
1.
기본값: 1
CSS속성: animation-iteration-count
CSS버전: CSS3
2.
IE 제외한 모든 최신 브라우저 지원.
animationIterationCount 구문
[반환]
object.style.animationIterationCount
[설정]
object.style.animationIterationCount = "속성값"
[속성값]
number
재생 횟수 지정 숫자. (기본값: 1)
infinite
무한정 재생.
initial
이 속성의 기본값으로 설정.
inherit
부모요소 속성값 상속.
[반환값]
요소의 animation-iteration-count 속성 나타내는 문자열.
