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

Question

我有一个横跨横幅的缩略图列表。每个图像都根据自己的动画间隔和无限循环动画进行动画处理。当我第一次加载页面时，动画看起来很流畅，几秒钟后，动画节奏开始变慢并且不一致。我打开我的检查元素，跟踪内存动画，堆内存随着时间的推移而增加，毕竟导致延迟。

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;

性能

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

CSS infinite animation is not consistent and laggy after few seconds

html

css

animation

animate.css