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; 

パフォーマンス