Simple animation hangs on first page launch

I have a simple CSS ticker animation :

<link rel="preload" href="../media/main/comissions_table_borderless_comp.svg" as="image" type="image/svg" fetchpriority="high">

    <div class="table_container_container">
      <div class="table_container">
        <div class="table_content_1">
          <img src="../media/main/comissions_table_borderless_comp.svg" alt="open for comissions">
          <img src="../media/main/comissions_table_borderless_comp.svg" alt="open for comissions">
        </div>
        <div class="table_content_2">
          <img src="../media/main/comissions_table_borderless_comp.svg" alt="open for comissions">
          <img src="../media/main/comissions_table_borderless_comp.svg" alt="open for comissions">
        </div>
      </div>
    </div>

.table_content_1,
.table_content_2 {
  animation: ticker 5s infinite linear forwards;
}

@keyframes ticker {
  0% {
    transform: translate(-81%, 0);
  }

  100% {
    transform: translate(-31%, 0);
  }
}

Sometimes, when starting the page, the animation “stucks”, i.e. moves very slowly. But when you inspect the code, you can see that the containers and images in them moves at the right speed. I pre-load all the necessary images :

<link rel="preload" href="../media/main/comissions_table_borderless_comp.svg" as="image" type="image/svg" fetchpriority="high">

Also, I’ve tried using :

will-change: transform;

@keyframes ticker {
  0% {
    transform: translate3d(-81%, 0, 0);
  }
  100% {
    transform: translate3d(-31%, 0, 0);
  }
}

But it didn’t help. I can’t find any logic for this error, as other similar animations on the site work without any problem.

I tried creating a simple CSS animation of the ticker. it worked, but when reloading the page, sometimes the animation lags

You need to sign in to view this answers