My website featured a banner with a series of thumbnail images that animated at different intervals and looped indefinitely. Initially, the animations ran smoothly, but after a few seconds, they began to slow down and lose consistency. To troubleshoot, I used the inspect element tool and discovered that the memory usage was steadily increasing over time, causing laggy performance.
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; }
Performance