How to remove the delay between setTimeout and setInterval cycles with constant animation-css?

Question

css

Hello, there is an animation that lasts 1 second:

.anim-elem{
    transform: translateX(6017.75px);
    transition: transform 1000ms linear 0s;
}

And there is js that calculates the desired properties and substitutes them into the element every second, which starts the motion animation non-stop:

setInterval(function timeInterval() {
/**
ВЫсчитываем новую позицию и подставляем её. Так же тут много всяких действий и иных рассчётов
**/
$(".anim-elem").css('transform', 'translateX('+position_x+'px)');
  }, 1000);

The problem is that every 2 seconds there is a delay in the animation (1 time it works out as it should, and the second time there is a delay), it is not very large, but due to the smoothness of everything else it stands out, it turns out to stumble, while on mobile it is more 2-3 times. Between there are still elements that also change their properties every second with smooth animation. How to make animations and code run in parallel and micro-delays are not visible?

Answer 1

Make animation using animation, since synchronizing js and css will not work due to the way js works.