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