JavaScriptでランダムフェードインするギャラリーを作成

<div id="randomfade">
    <ul class="grid-wrapper grid">
        <li class="grid-item">
            <img src="images/music001.jpg" alt="">
        </li>
        <li class="grid-item">
            <img src="images/music002.jpg" alt="">
        </li>
        <li class="grid-item">
            <img src="images/music003.jpg" alt="">
        </li>
        <li class="grid-item">
            <img src="images/music004.jpg" alt="">
        </li>
        <li class="grid-item">
            <img src="images/music005.jpg" alt="">
        </li>
        <li class="grid-item">
            <img src="images/music006.jpg" alt="">
        </li>
        <li class="grid-item">
            <img src="images/music007.jpg" alt="">
        </li>
        <li class="grid-item">
            <img src="images/music008.jpg" alt="">
        </li>
        <li class="grid-item">
            <img src="images/music009.jpg" alt="">
        </li>
        <li class="grid-item">
            <img src="images/music010.jpg" alt="">
        </li>
    </ul>
</div>

#randomfade .grid-wrapper {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 4%;
}
#randomfade .grid-item {
	aspect-ratio: 1/1;
	width:100%;
	height:100%;
	border:none;
	overflow: hidden;
}
#randomfade .grid-item img{
	width:100%;
	height:100%;
	object-fit: cover;
	overflow: hidden;
	opacity: 0;
}
#randomfade .grid-wrapper li:first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
#randomfade .grid-wrapper li:last-child {
    grid-column: 3 / 5;
    grid-row: 3 / 5;
}
#randomfade .grid {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 6%;
    margin-bottom: 50px;
}

/* モバイル版
------------------------------- */
@media (max-width: 740px) {
	
	#randomfade .grid {
      display: grid;
      gap: 1em;
      grid-template-columns: repeat(2, 1fr);
    }
    #randomfade .grid-wrapper li:first-child {
        grid-column: auto;
        grid-row: auto;
    }
	#randomfade .grid-wrapper li:last-child {
        grid-column: auto;
        grid-row: auto;
    }
   
}

const item = document.querySelectorAll('#randomfade .grid-item img');
const itemArray = Array.from(item);
const shuffledItemArray = shuffleArray(itemArray);
window.addEventListener('load', () => {
for(let i = 0; i < shuffledItemArray.length; i++ ){
	shuffledItemArray[i].animate(
		{
			opacity: [0, 1]
		},
		{
			delay: 2000 + i * 400,
			duration: 3000,
			fill: 'forwards',
			easing: 'ease'
		}
	)
}
});

function shuffleArray(sourceArr) {
    // 元の配列の複製を作成
    const array = sourceArr.concat();
    // Fisher–Yatesのアルゴリズム
    const arrayLength = array.length;
    for (let i = arrayLength - 1; i >= 0; i--) {
        const randomIndex = Math.floor(Math.random() * (i + 1));
        [array[i], array[randomIndex]] = [array[randomIndex], array[i]];
    }
  return array;
}