CSS/JS looped animation without timers?

Question

css

There is a task to start playing the animation every 3 seconds, but I don't want to load the page with timers.
I wrote a css class that has a keyframe with the desired animation, and a delay before the animation of 3s.
When the keyframe plays to the end, I simply remove the class that the keyframe is bound to and re-add it to restart the animation.

The problem is that if I remove and immediately add the class, the animation won't work:
$('div').removeClass('animation');
$('div').addClass('animation');

But if I remove it and add it back a few milliseconds later, the animation works:
$('div').removeClass('animation');
setTimeout(function() {
$('div').addClass('animation');

The question is, how can you do without a timer?

Here is an example on a simple cube that will beep every 3 seconds - https://codepen.io/Eligion/pen/LYRWzyy

Answer 1

And how to make the car go without wheels?
Somewhere, in any case, you will need to specify the time period, be it css or js.