Assigning random scroll speeds to divs with jquery?

So I have used javascript to randomly alter the position of the divs on a website I am trying to make (cards on a wordpress theme).

I was hoping to add random scroll speeds to each of these cards, so they all move at slightly different speeds (using a similar code to the one I have used for random position.

I have been struggling to find jquery examples that I can successfully put into my code.

Here is an outline of my code so far:

HTML:

<div class="card">
<img src="https://www.naturschaetze-suedwestfalens.de/var/sauerland/storage/images/media/bilder/naturschaetze/buchfotos/05_p3_laubfrosch-mbd/507661-1-ger-DE/05_P3_Laubfrosch-MBD_front_large.jpg">
</div>

<div class="card">
<img src="https://www.naturschaetze-suedwestfalens.de/var/sauerland/storage/images/media/bilder/naturschaetze/buchfotos/05_p3_laubfrosch-mbd/507661-1-ger-DE/05_P3_Laubfrosch-MBD_front_large.jpg">
</div>

<div class="card">
<img src="https://www.naturschaetze-suedwestfalens.de/var/sauerland/storage/images/media/bilder/naturschaetze/buchfotos/05_p3_laubfrosch-mbd/507661-1-ger-DE/05_P3_Laubfrosch-MBD_front_large.jpg">
</div>

CSS:

.card {
position: relative;
}

JQUERY:

//random position of each Card

$(document).ready(function(){
$('.card').each(function() {
$(this).css({'left' : (Math.random() * 120) - 20 + '%'})
$(this).css({'top' : (Math.random() * 200) - 50})

});
});

If someone could point me in the right direction, would be amazing !

Thanks