简单的动画挂在首页启动时

Question

我有一个简单的 CSS 股票行情动画 :

<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);
  }
}

有时，启动页面时，动画会“卡住”，即移动速度非常慢。但是当您检查代码时，您可以看到其中的容器和图像以正确的速度移动。我预先加载了所有必要的图像：

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

另外，我尝试过使用：

will-change: transform;

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

但这并没有帮助。我找不到此错误的任何逻辑，因为网站上的其他类似动画可以正常工作。

我尝试创建一个简单的股票行情指示器 CSS 动画。它有效，但重新加载页面时，有时动画会滞后

Answer 1

我认为你做得很好，只需要调整翻译值。

请考虑对您的代码进行以下更改。

<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 10s infinite linear forwards;
}

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

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

希望，这有帮助。