CSS動態加載圖片淡出是一種常用的頁面優化方法。通過此方法，可以避免在頁面加載時同時加載出所有圖片，即使這些圖片遠離焦點區域。以下是一些示例代碼：

.fadeOut {
-webkit-animation: fadeOut 0.5s ease-in-out forwards;
animation: fadeOut 0.5s ease-in-out forwards;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

這段代碼的意思是，當一個圖片被加載時，它會按照CSS定義的動畫淡出。這里使用了CSS3動畫，所以需要在代碼中添加瀏覽器前綴以確保支持多種瀏覽器。動畫持續時間為0.5秒，并用ease-in-out定義動畫速度。最后的forwards參數意味著當動畫完成時，元素會保持在最后的狀態，即圖片會完全消失。

為了使CSS動態加載圖片淡出生效，需要在HTML中使用相應的樣式類名。以下是一個例子：

這里，<img>元素使用了剛才定義的.fadeOut樣式類名。這意味著每當這個圖片被加載時，它將會動態淡出。

總體來說，CSS動態加載圖片淡出是一種使用簡單的優化方法，可以大大減少頁面加載時間，提高用戶體驗。