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