Exactly. This is what CSS Animations [1] were made for.
And you don't even need to do collision detection, as CSS can already alternate directions and loop infinitely.
Nice demo. I was curious how you were going to avoid collision -- my assumption was since the pattern wasn't a "single cycle" loop (whose total length presumably depends on the LCM of the width and height) that the animation setting would either need to be very complicated or changed periodically, but you cleverly sidestepped the whole problem by applying X and Y translations to different wrappers so they can each have their own fixed period: smart!
https://bouncing-logo-css.glitch.me/
Just needed a tiny bit of JS to set the sizes and randomise the logo colour.
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animati...