Quería usar @keyframes, así que hice esto:
div { width: 100px; height: 100px; background: red; position: relative; animation: action 5s infinite; } @keyframes action { 0% {top: 0px;} 25% {top: 200px;} 75% {top: 50px} 100% {top: 100px;} }Sin embargo, este código se ejecuta cuando se carga la página. ¿Hay alguna manera de activar @keyframes en un momento determinado con js? p.ej.
for (var i = 0; i < 10; i++) { //Do something } //Activate @keyframes¡Gracias!
En CSS:
div { // your div code animation-play-state: paused; }En JS:
// do some stuff after the page loads (give your div an ID) document.getElementById("myDiv").style.animationPlayState = "running";Si desea activar la animación usando Javascript, solo necesita configurar la animación del elemento.
div { width: 100px; height: 100px; background: red; position: relative; } @keyframes action { 0% {top: 0px;} 25% {top: 200px;} 75% {top: 50px} 100% {top: 100px;} } document.getElementByID('your-Elem').style.animation="action 5s infinite";Entonces, en su caso, diría que le dé al elemento una ID (o simplemente seleccione todos los divs si eso es lo que está buscando) y luego ejecute esta línea en su bucle for.
Puede separar la definición de animación en otra clase css y activarla mediante programación. En primer lugar, agregue clase a su div, por ejemplo:
<div class="test"> </div>Cree otra clase css donde defina la animación:
div { width: 100px; height: 100px; background: red; position: relative; } .animate{ animation: action 5s infinite; } @keyframes action { 0% {top: 0px;} 25% {top: 200px;} 75% {top: 50px} 100% {top: 100px;} }Agregue esta clase al elemento div classList cuando lo encuentre correcto:
for (let i = 0; i < 10; i++) { // } document.querySelector('.test').classList.add('animate');