Since you can have more animations per element in CSS and you can run these over different periods of time, it’s completely possible to create animations that seem random.
In this experiment I have done just this. With only three CSS animations ($ keyframes) per element (and only four in total), run with different times and delays, thees bubble animations seems quite random.

First animation is only to move the bubbles from bottom to top and fading in and out. Then I run the animation that moves the bubbles from side to side. By running this at different lengths, the bubbles will not look “synchronized”. The last animation moves the bubble 40vw to the right of all the bubbles that are on the left side of the center and 40vw to the left for the other, and resizes the bubbles using scale(), halfway in the animation. So by running this animation at twice the time of the animation that moves the bubble from bottom to top, the bubbles will change position every time. Which gives a good impression that they are not in a pattern.

I could have added more variations, like color and more placements, but I think this will do for this simple bubble experiment.

See it in full screen