Как убрать задержку между циклами setTimeout и setInterval при постоянной анимации-css?

Question

[Tutucu]

Здравствуйте, есть анимация, которая длится 1 секунду:

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

И есть js который высчитывает нужные свойства и подставляет их в элемент каждую секунду, что запускает анимацию движения безостановочно:

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

Проблема в том, что каждые 2 секунды появляется задержка в анимации (1 раз как надо отрабатывает, а второй появляется задержка), она не особо большая, но из-за плавности всего остального она выделяется, получается спотыкание, при этом на мобильных она больше в 2-3 раза. Меж Есть ещё элименты, которые так же меняют свои свойства каждую секунду с плавной анимацией. Как сделать так, чтобы анимации и код выполнялся параллельно и микрозадержек не было видно?

Answer 1

[WapSter]

Делай анимацию при помощи animation, так как синхронизировать js и css не выйдет из-за особенностей работы js.

Comments

[Tutucu]

Если "animation" - это про свойство CSS, то не подходит, значения для анимации (размеры,положение и т.д.) динамически изменяются и нужно чтобы анимацию можно было бы остановить при помощи JS.

[WapSter]

Tutucu, ты так уверен?) keyframe generate in js и останавливать animation можно, к тому же у тебя подключен jquery почему же анимацию полность не сделать через .animate(). Еще есть спосбоы делать анимацию при помщи рекурсий. В общем читай учись) Направление я тебе дал

[Tutucu]

WapSter, Ага, спасибо!