在使用 CSS 圖片動畫時，有時候我們會遇到一個問題：初始閃爍。這是因為瀏覽器在加載 CSS 和圖片時需要一定時間，如果沒有設(shè)置 preload 或在加載過程中出現(xiàn)了網(wǎng)絡(luò)波動，瀏覽器就會出現(xiàn)初始閃爍的問題。

img {
opacity: 0;
animation: fadeIn 2s;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

為了避免初始閃爍的現(xiàn)象，我們可以通過設(shè)置 opacity 并添加 CSS 動畫，讓圖片在加載后以漸變方式顯示出來。在上述代碼中，我們設(shè)置了 opacity 為 0，即將其隱藏。然后通過 animation 屬性添加了一個名為 fadeIn 的動畫，動畫時長為 2 秒，并設(shè)置其填充模式為 forwards，讓其結(jié)束時停留在最后一幀的狀態(tài)。最后，我們通過設(shè)置 keyframes，定義了 fadeIn 動畫的過程，從 opacity 為 0 到 opacity 為 1。

除了使用動畫，我們還可以使用 preload 預(yù)加載的方式來避免初始閃爍，具體方法為：

通過在 head 標(biāo)簽內(nèi)添加 link 標(biāo)簽的 preload 屬性，將圖片鏈接作為要預(yù)加載的資源，設(shè)置其 as 屬性為 "image"，并在 body 中正常使用 img 標(biāo)簽進(jìn)行圖片的加載。這樣，瀏覽器在加載 CSS 的同時就會預(yù)加載指定的圖片資源，避免了初始閃爍。