randomize number (on a range) on css transform: translateX - css

Question

I have this animation, I would like to randomize the translateX value with a specific range.
#peperone{
position: relative;
z-index: 7;
animation: droppepper 4s linear forwards;
animation-iteration-count: infinite ;
}
#keyframes droppepper{
from {
transform: translateY(-400px) translateX(-90%) rotate(0deg);
}
to {
transform : translateY(1000%) translateX(-30%) rotate(180deg);
}
}
I saw a lot of answers here on stackoverflow and other pages as well, but I can't put it to work..
I tried with
.random(#min, #max) {
#random: `Math.round(Math.random() * (#{max} - #{min}) + #{min})`;
}
and adding .random(-100, -20); into #peperone, but then I don't know how to use that number inside the transform translateX().
Is this doable or am I pretending too much? :P
If so, can you help me out?
Thanks

Answer 1

You can generate a random number with Javascript and update a set css variable, I included an example below.
const randomInt = Math.floor(Math.random() * (100 - 20 + 1) + 20)
console.log('translateX will animate to: ',randomInt*-1 + "%");
const root = document.documentElement;
root.style.setProperty('--random-int', randomInt*-1 + "%");
document.getElementById('guide').style.width = randomInt + "%";
document.getElementById('guide').textContent = randomInt + "%";
:root {
--random-int: -50%;
}
html, body {
margin: 0;
}
#peperone{
position: relative;
z-index: 7;
animation: droppepper 4s linear forwards;
animation-iteration-count: infinite;
width: 100px;
line-height: 100px;
background: #333;
color: #fff;
font-size: 0.9rem;
position: relative;
margin: 2rem 0;
height: 100px;
}
#guide {
position: absolute;
top: 0;
left: 0;
background: red;
height: 100%;
}
#keyframes droppepper{
from {
transform: translateX(100%);
}
to {
transform: translateX(var(--random-int));
}
}
<div id="peperone"><div id="guide"></div></div>