CSS unendlich Animation ist nicht konsistent und nach ein paar Sekunden lagag

Question

Ich hatte eine Liste von Miniaturbildern über das Banner verteilt. Jedes Bild animiert basierend auf seinem eigenen Animationsintervall und Endlosschleife der Animation. Als ich die Seite zum ersten Mal geladen habe, sieht die Animation gut und glatt aus, ein paar Sekunden später beginnt das Animationstempo abzulaufen und nicht konsistent. Ich öffne mein inspect-Element und zeichne die Speicheranimation nach, der Heap-Speicher nimmt mit der Zeit zu, verursacht schliesslich Verzögerungen.

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

Leistung

Answer 1

Nur setzen animation-direction in alternate wird dieses Problem der Leistung lösen.

CSS

animation-direction: alternate; 

Leistung