CSS无限动画在几秒钟后不一致且滞后

Question

我有一个横跨横幅的缩略图列表。每个图像都基于动画间隔和无限循环动画进行动画制作。 当我第一次加载页面时，动画看起来很细腻，几秒钟后，动画节奏开始磨损并且不一致。我打开了我的inspect元素，并跟踪内存动画，堆内存随着时间的推移而增加，毕竟导致滞后。

HTML

<div class="images">
  <div class="animated fadeIn infinite img1"></div>
  <div class="animated fadeIn infinite img2"></div>
  <div class="animated fadeIn infinite img3"></div>
  <div class="animated fadeIn infinite img4"></div>
  <div class="animated fadeIn infinite img5"></div>
  <div class="animated fadeIn infinite img6"></div>
</div>

CSS

.img1 { animation-duration: 2.65s; }
.img2 { animation-duration: 2.75s; }
.img3 { animation-duration: 2.85s; }
.img4 { animation-duration: 2.95s; }
.img5 { animation-duration: 3.05s; }
.img6 { animation-duration: 3.10s; }

性能

Answer 1

只需将animation-direction设置为alternate即可解决该问题。

<强> CSS

animation-direction: alternate;

<强>性能