El evento de iteración de animación ocurre cuando se repite una animación CSS.
La animación solo se reproducirá una vez si la propiedad CSS animation-iteration-count se establece en «1» . La animación debe ejecutarse más de una vez para que se active este evento.
Eventos que pueden ocurrir cuando se reproduce una animación CSS:
- animationstart: ocurre cuando la animación CSS ha comenzado.
- animationiteration: ocurre cuando se repite la animación CSS.
- animationend: ocurre cuando la animación CSS se ha completado.
Sintaxis:
- Código para Chrome, Safari y Opera
object.addEventListener("webkitAnimationIteration", myScript); - Sintaxis estándar:
object.addEventListener("animationiteration", myScript);
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
#div {
width: 100%;
height: 100px;
background: green;
position: relative;
font-size: 40px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {
top: 0px;
}
to {
top: 200px;
}
}
@keyframes mymove {
from {
top: 0px;
}
to {
top: 200px;
}
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<div id="div" onclick="GFGFun()">
Click me to start the animation.
</div>
<script>
var x = document.getElementById("div");
// Start the animation with JavaScript
function GFGFun() {
// Code for Chrome, Safari and Opera
x.style.WebkitAnimation = "mymove 4s 2";
// Standard syntax
x.style.animation = "mymove 4s 2";
}
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationStart", StartFun);
x.addEventListener("webkitAnimationIteration", RepeatFun);
// Standard syntax
x.addEventListener("animationstart", StartFun);
x.addEventListener("animationiteration", RepeatFun);
function StartFun() {
this.innerHTML = "The animation has started";
this.style.backgroundColor = "lime";
}
function RepeatFun() {
this.innerHTML = "Animation was played again";
this.style.backgroundColor = "darkgreen";
}
</script>
</center>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con el evento de iteración de animación DOM se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- safari de manzana
- Ópera
Publicación traducida automáticamente
Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA