animation-iteration-count: value; object.style.animationIterationCount = "value"; <'animation-iteration-count'> = <single-animation-iteration-count># <single-animation-iteration-count> = infinite | <number> infinite The animation will repeat forever.
<number> An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<!doctype html>
<html>
<head>
<style>
@keyframes mykeyframes
{
0%
{
margin-left: 0;
}
100%
{
margin-left: 200px;
}
}
p
{
animation-duration: 4s;
animation-iteration-count: 4;
animation-name: mykeyframes;
}
</style>
</head>
<body>
<p>number</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
@keyframes mykeyframes
{
0%
{
margin-left: 0;
}
100%
{
margin-left: 200px;
}
}
p
{
animation-duration: 4s;
animation-name: mykeyframes;
}
</style>
</head>
<body>
<button>initial</button>
<button>infinite</button>
<button value="4">number</button>
<p>animation-iteration-count</p>
<script>
function myfunction(myparameter)
{
const mytarget = myparameter.target;
const myproperty = mytarget.value || mytarget.innerHTML;
document.querySelector("p").style.animationIterationCount = myproperty;
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>