Po prostu zrób animacje @keyframes dla tworzonego diva.
<button>Losuj</button>
<div class="all"></div>
html {
font-family: arial;
padding: 50px;
}
button {
color: black;
background: white;
border: 3px black solid;
padding: 10px 20px;
margin: 30px auto 60px auto;
font-size: 2rem;
display: block;
border-radius: 5px;
transition: 250ms ease;
}
button:hover {
cursor: pointer;
background: black;
color: white;
}
.balls {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: deepskyblue;
color: white;
font-size: 1.5rem;
line-height: 80px;
text-align: center;
box-shadow: 0 0 15px -1px blue;
float: left;
margin-right: 50px;
animation: opacity 1s ease;
}
@keyframes opacity{
0% {
opacity: 0;
}
25% {
opacity: .25;
}
50% {
opacity: .5;
}
100% {
opacity: 1;
}
}
var array = [];
var losowanie = function () {
if (array.length === 6) return
var losowana = Math.floor(Math.random() * 49 + 1);
if (array.indexOf(losowana) !== -1) return losowanie()
var div = document.createElement("div");
var all = document.querySelector(".all");
div.classList.add("balls");
div.innerHTML = losowana;
all.appendChild(div);
array.push(losowana);
setTimeout(losowanie, 450);
};
var button = document.querySelector('button');
button.addEventListener("click", losowanie);