0

estoy trasteando con js y me ha surgido la siguiente duda

Tengo divs creados con js, los cuales tienen la propiedad de posicion y tamaño aleatorios. Haciendolo de la siguiente forma.

Me gustaria saber cómo puedo hacer para que la animación de css se ejecute en un momento aleatorio para cada uno de los divs, y así no coincidan las animaciones a la vez, o si es mejor hacer esa animación con js

var i = 0;
while (i < 300) {
    i++;
  
  var positionX = Math.floor(Math.random() * 101);
  var positionY = Math.floor(Math.random() * 101);
  var size = Math.floor(Math.random() * 5);
  
  var estilo = "width:" + size + "px;height:" + size + "px;top:" + positionX + "%;left:" + positionY + "%;";
  
  
  var nuevoDiv = document.createElement("div");
  nuevoDiv.setAttribute("id", "div2");
  nuevoDiv.setAttribute("style", estilo);
var element = document.getElementById("div1");
element.appendChild(nuevoDiv);
  
  }
#div2{
  transition-duration:2s;
  position:absolute;
    animation-name: example;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border-radius: 100%;
}

@keyframes example {

    0% {transform: scale(0.1)}
    50% {transform: scale(1)}
    100% {transform: scale(.1)}
}

Dejo aquí en código completo con CODEPEN

1
  • podrías dentro del while validar si es par o impar , y dependiendo del resultado , asignarle la clase de animación que quieres para que te dé un resultado aleatorio Commented el 21 nov. 2018 a las 12:54

2 respuestas 2

1

Existe una propiedad de las animaciones que es animation-delay que te permite definir cuantos segundos de espera han de pasar para que se ejecute la animación.

Podrías tener establecidas varias clases CSS con animaciones que contengan esta propiedad con diferentes valores:

.animacion_1{
  transition-duration:2s;
  position:absolute;
    animation-name: example;
    animation-delay: 5s;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border-radius: 100%;
}

.animacion_2{
  transition-duration:2s;
  position:absolute;
    animation-name: example;
    animation-delay: 3s;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border-radius: 100%;
}

.animacion_3{
  transition-duration:2s;
  position:absolute;
    animation-name: example;
    animation-delay: 9s;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border-radius: 100%;
}

@keyframes example {

    0% {transform: scale(0.1)}
    50% {transform: scale(1)}
    100% {transform: scale(.1)}
}

De esta manera, podrías luego generar un número aleatorio para elegir cual de estas tres clases le añades al elemento HTML en cuestión.

0

Lo he solucionado facilmente gracias a @PHPMyguel con la idea de animation-delay

var animationDelay = Math.floor(Math.random() * 5);
  var animationDelay = animationDelay + "s";
  
  var estilo = "width:" + size + "px;height:" + size + "px;top:" + positionX + "%;left:" + positionY + "%;animation-delay:" + animationDelay;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.