Почему анимация подергивается?

Question

Пытаюсь реализовать анимацию бегущей строки, но сталкиваюсь с тем, что при всей плавности анимации время от времени она начинает дергаться (я не путаю это с перезапуском анимации). Это хорошо заметно на полном экране.

Уже пытался реализовать как на чистом CSS, React библиотеками, так и на чистом JS, даже ради интереса canvas попробовал, но это избыточно для такой задачи. Все работает нормально, но везде результат такой, что анимация подергивается при движении, какие-то микро-тики. С чем это может быть связано?

const block = document.getElementById("block")
block.animate([
  // keyframes
  { transform: 'translate3D(0, 0, 0)' },
  { transform: `translate3D(-10000px, 0, 0)` }
], {
  // timing options
  duration: 16000,
  iterations: Infinity
});

#block {
  width: 100%;
  height: 50px;
  position: relative;
  display: grid;
  gap: 10px;
  grid-auto-flow: column;
}
.elem {
  height: 50px;
}
.a1 {
  min-width: 500px;
  background: red;
}
.a2 {
    min-width: 150px;
  background: black;
}
.a3 {
    min-width: 74px;
  background: blue;
}
.a4 {
    min-width: 223px;
  background: purple;
}
.a5 {
    min-width: 800px;
  background: yellow;
}

<div id="block">
  <div class="elem a1"></div>
  <div class="elem a2"></div>
  <div class="elem a3"></div>
  <div class="elem a4"></div>
  <div class="elem a5"></div>
  <div class="elem a1"></div>
  <div class="elem a2"></div>
  <div class="elem a3"></div>
  <div class="elem a4"></div>
  <div class="elem a5"></div>
  <div class="elem a1"></div>
  <div class="elem a2"></div>
  <div class="elem a3"></div>
  <div class="elem a4"></div>
  <div class="elem a5"></div>
  <div class="elem a1"></div>
  <div class="elem a2"></div>
  <div class="elem a3"></div>
  <div class="elem a4"></div>
  <div class="elem a5"></div>
  <div class="elem a1"></div>
  <div class="elem a2"></div>
  <div class="elem a3"></div>
  <div class="elem a4"></div>
  <div class="elem a5"></div>
  <div class="elem a1"></div>
  <div class="elem a2"></div>
  <div class="elem a3"></div>
  <div class="elem a4"></div>
  <div class="elem a5"></div>
  <div class="elem a1"></div>
  <div class="elem a2"></div>
  <div class="elem a3"></div>
  <div class="elem a4"></div>
  <div class="elem a5"></div>
</div>

БЛОГ НА HUSL

Почему анимация подергивается?

Ответы (0 шт):