CSS動圖加載是指使用CSS代碼來實現(xiàn)頁面上的動畫效果，這些動畫效果通常用于網(wǎng)站的裝飾和交互，能夠為用戶帶來良好的視覺體驗。

/* 以下是利用CSS實現(xiàn)動圖的代碼示例 */
.animation {
/* 設(shè)置動畫的寬高 */
width: 50px;
height: 50px;
/* 設(shè)置動畫播放時間 */
animation-duration: 2s;
/* 設(shè)置動畫播放次數(shù) */
animation-iteration-count: infinite;
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.animation.loading {
/* 利用動畫關(guān)鍵幀實現(xiàn)旋轉(zhuǎn)的效果 */
animation-name: loading;
}

上面代碼中的animation類名表示該元素需要播放動畫，loading類名表示該元素需要播放的動畫效果是旋轉(zhuǎn)。animation-duration屬性設(shè)置了動畫的播放時長，animation-iteration-count屬性設(shè)置動畫循環(huán)次數(shù)，這里的infinite表示無限循環(huán)。

在 @keyframe 中，定義了動畫的名稱（loading），并在0%和100%的關(guān)鍵幀中設(shè)置了動畫的開始和結(jié)束效果，這里是通過 transform: rotate() 來實現(xiàn)圖片的旋轉(zhuǎn)。最后，通過.animation.loading來將動畫應(yīng)用到具體的 HTML 元素上。

使用 CSS 動圖加載不僅能優(yōu)化用戶體驗，還能加快網(wǎng)頁加載速度，提高性能表現(xiàn)。但應(yīng)注意，不宜過多使用 CSS 動畫，以免影響頁面的響應(yīng)速度。