get a random number after keyframes done its work / just get a random number every second

hi guys

let x 
    x =
    Math.floor(Math.random() * 100);
    var r = document.querySelector(':root');
    function set1() {
  // Set the value of variable --blue to another value (in this case "lightblue")
    r.style.setProperty('--at11', x + '%');
}
window.onload = set1;

let x 
    x =
    Math.floor(Math.random() * 100);
    var r = document.querySelector(':root');
    function set1() {
  // Set the value of variable --blue to another value (in this case "lightblue")
    r.style.setProperty('--at11', x + '%');
}
window.onload = set1;

ok so now i inserted the x% in the --at11 which is a % but i need sth so like every second it gives me a new random number what should i do? the reason i need it:(css)

@keyframe animation-goes{
10%{--sth : var(--at11)
    }
20%{--sth : var(--at11)
    }
30%{--sth : var(--at11)
    }
......
}

@keyframe animation-goes{
10%{--sth : var(--at11)
    }
20%{--sth : var(--at11)
    }
30%{--sth : var(--at11)
    }
......
}

so i need it to change the animation all the time and be random (this is a simple example not the real deal)

2 Replies

Choo♚𝕂𝕚𝕟𝕘•2mo ago

The easiest solution is probably to use setInterval and just change the value of --at11 completely in the JS. You don't need a CSS animation for it.

ἔρως•2mo ago

that is actually the correct answer, as css animations can cause weird issues on some laptops (people complained a fair bit about it, when vscode was using css animations for the blinking cursor) but be careful: setInterval will interrupt everything in the page. if all you need is an handful of waits, when you can get away with setTimeout

Gaming

Programming

get a random number after keyframes done its work / just get a random number every second