Animacja JS z @keyframes w css

Cześć! ;)

na stronie po przyciśnięciu odpowiednich przycisków i kliknięciu play odtwarzają mi się dźwięki. Przy każdym dźwięku z dołu ekranu wyskakuje mi piłeczka do wysokości połowy ekranu. Rozłożyłam sobie wylot tych piłeczek na 10 obszarów. W kodzie css mam:

@keyframes jump1 {
    0% {
        bottom: 0%;
        left: 10%
    }

    50% {
        bottom: 50%;
        left: 11%;
    }

    100% {
        bottom: 0%;
        left: 13%
    }
}


Chciałabym aby w wartość procentowa w bottom określana była losowo. Jak to zrobić? 
Mój kawałek JS poniżej:

```javascript


createBubble() {
        const bubble = document.createElement('p');
        this.bubbleSpace.appendChild(bubble);
        let losujKolor= this.colors[Math.floor(Math.random()*7)];
        console.log(losujKolor)
        bubble.style.backgroundColor =losujKolor
       

        let cyfra = Math.ceil(Math.random()*2)



        const cyfraAnim = Math.ceil(Math.random() * 9)
        console.log(cyfraAnim)

        bubble.style.animation = `jump${cyfraAnim} ${cyfra}s alternate ease-in-out 2`
     

    }

Dziękuję za odpowiedzi :)

Nie jest to trywialne jak w przypadku zmian styli na elemencie z poziomu JS, ale możliwe.
Z poziomu JS możemy uzyskać dostęp do załadowanych arkuszy styli poprzez document.styleSheets. Interesujący nas arkusz można rozpoznać np. przez właściwość href:

const allStyleSheets = Array.prototype.slice.call(document.styleSheets);
const mainStyleSheet = allStyleSheets.filter((ss) => ss.href !== null && ss.href.endsWith("main.css"))[0];

Stylesheet zawiera tablicę cssRules, reprezentującą reguły CSS zapisane w danym arkuszu. Z niej wyciągamy interesującą nas regułę:

const rules = Array.prototype.slice.call(mainStyleSheet.cssRules);
const theRule = rules.filter((r) => r.name === 'jump1')[0];       

Ponieważ jest to złożona reguła, ona również posiada tablicję cssRules. Leżą w niej interesujące nas reguły zdefiniowane dla % animacji. Każda taka reguła posiada pole style, w której ustawione są wartości właściwości CSS. Można je zmodyfikować, np.:

theRule.cssRules[0].style.bottom = '<jakaś losowa wartość>%';