CSS/JS зацикленная анимация без таймеров?

Question

[krock00000]

Есть задача, раз в 3 секунды запускать проигрывание анимации, но я не хочу нагружать страницу таймерами.
Я написал css класс, в котором есть кейфрейм с нужной анимацией, и задержкой перед анимацией 3s.
Когда кейфрейм проигрывается до конца, я просто удаляю клас к которому привязан кейфрейм, и добавляю его заново, чтобы перезапустить анимацию.

Проблема в том, что если я удалю и сразу добавлю класс, анимация не сработает:
$('div').removeClass('animation');
$('div').addClass('animation');

Но если я удалю, и через несколько милисекунд добавлю его обратно, анимация сработает:
$('div').removeClass('animation');
setTimeout(function() {
$('div').addClass('animation');
}, 25);

Вопрос, как можно обойтись без таймера?

Вот пример на простом кубике, который будет пигать раз в 3 секунды - https://codepen.io/Eligion/pen/LYRWzyy

Comments

[Lynn «Кофеман»]

А не проще запустить бесконечную анимацию на CSS?

[Lynn «Кофеман»]

https://codepen.io/alexeyten/pen/rNMyGRW

Answer 1

[Владимир Юрченков]

А как сделать, чтобы машина поехала без колес?
Где то, Вам в любом случае нужно будет указывать временной промежуток, будь это css или js.