La propiedad Style animationIterationCount en HTML DOM se usa para establecer o devolver cuántas veces se debe reproducir una animación.
Sintaxis:
- Se utiliza para devolver la propiedad animationIterationCount.
object.style.animationIterationCount
- Se utiliza para establecer la propiedad animationIterationCount.
object.style.animationIterationCount = "number|infinite|initial| inherit"
Valores de propiedad:
- número: Se utiliza para establecer cuántas veces se reproducirá la animación. Su valor por defecto es 1.
- infinite: Establece que la animación se reproducirá infinitas veces.
- initial: establece la propiedad animationIterationCount en su valor predeterminado.
- heredar: el valor de esta propiedad se hereda de su elemento padre.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Style animationIterationCount Property
</title>
<style>
div {
width: 80px;
height: 80px;
background: lightgreen;
position: relative;
/* For Chrome, Safari, Opera browsers */
-webkit-animation: mymove 2s 1;
animation: mymove 2s 1;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {
left: 0px;
top: 0px;
}
to {
left: 250px;
top: 250px;
}
}
@keyframes mymove {
from {
left: 0px;
top: 0px;
}
to {
left: 250px;
top: 250px;
background-color:green;
}
}
</style>
</head>
<body>
<p>
Click on the button to set
animation iteration count!
</p>
<button onclick="myGeeks()">
Click Here!
</button>
<br>
<script>
/* For Chrome, Safari, and Opera browsers */
function myGeeks() {
document.getElementById("GFG").style.WebkitAnimationIterationCount
= "10";
document.getElementById("GFG").style.animationIterationCount = "10";
}
</script>
<div id="GFG"></div>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Style animationIterationCount Property
</title>
<style>
div {
width: 200px;
height: 110px;
background: green;
text-align: center;
padding-top:50px;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation: mymove 2s 2;
animation: mymove 2s 2;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {left: 400px;}
to {left: 0px;}
}
@keyframes mymove {
from {left: 400px;}
to {left: 0px;}
}
</style>
</head>
<body>
<p>
Click on the button to set
animation iteration count!
</p>
<button onclick="myGeeks()">
Click Here!
</button>
<br>
<script>
function myGeeks() {
/* For Chrome, Safari, and Opera browsers */
document.getElementById("GFG").style.WebkitAnimationIterationCount
= "infinite";
document.getElementById("GFG").style.animationIterationCount
= "infinite";
}
</script>
<br>
<div id="GFG">
Style animationIterationCount Property
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad DOM Style animationIterationCount se enumeran a continuación:
- cromo 43.0
- Borde 12.0
- Internet Explorer 10.0
- Firefox 16.0
- Ópera 30.0
- Safari 9.0
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA