Почему моя анимация CSS не работает в JavaScript ⇐ CSS

[Anonymous]

Я пытаюсь анимировать свой куб (кости), когда пользователь нажимает кнопку и выполняю корпус костей. Мой код работает идеально, но анимация не работает. Я использую тайм -аут, но он не работает. < /P>
html < /p>
Куб - это кости, сторона - это стороны куба < /p>

Код: Выделить всё

< /code>
css < /p>
.cube
{
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotateX(193deg) rotateY(269deg);
animation: rolling 4s;
}
.anim {
animation: rolling 3s;
}
@keyframes rolling {
50% {
transform: rotateX(455deg) rotateY(455deg);
}

}
< /code>
js < /p>
document.getElementById("roll").addEventListener("click", function () {
side = Math.floor(Math.random() * 6);
console.log(`dic Case : ${side}`);
document.getElementsByClassName("cube")[0].classList.add("anim");
setTimeout(() => {
roll(side);
}, 4000);
})

Кроме того, если вы также можете улучшить часть дизайна в моем CSS, пожалуйста, сделайте это

Подробнее здесь: https://stackoverflow.com/questions/756 ... javascript