在網頁設計中，CSS3動畫可以幫助網頁擁有更多的動態效果，完善用戶體驗。但是，有時候使用CSS3動畫會導致圖片模糊，影響頁面質量，下面我們來探究一下原因。

img {
width: 200px;
height: 200px;
/* transition: transform 2s; */
transform: scale(1.2);
}

如上代碼所示，img標簽設置寬高200px，并使用transform縮放圖片，但是當我們開啟注釋，使用transition設置2秒鐘的transform過渡時，圖片卻出現了模糊。

這是因為，當我們對圖片應用transform屬性時，瀏覽器會對圖片進行插值計算，從而導致圖片像素變大，從而影響了圖片的清晰度。

那么如何解決這個問題呢？

一種解決方法是使用CSS3的屬性 image-rendering，在image-rendering屬性中，可以設置以下值：

• auto：使用默認值。
• pixelated：將圖像調整為像素狀，使圖像看起來更清晰。
• crisp-edges：強制圖像在所有縮放級別下保持清晰。

img {
width: 200px;
height: 200px;
transition: transform 2s;
transform: scale(1.2);
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -webkit-optimize-contrast; /* Webkit */
image-rendering: pixelated; /* CSS3 */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
}

如上代碼所示，對img標簽添加image-rendering屬性，并設置為crisp-edges, pixelated或其他。如此一來，圖片就不會因為CSS3動畫導致模糊，保證頁面的質量。

綜上所述，當使用CSS3動畫導致圖片模糊時，可以使用CSS3的image-rendering屬性來解決這個問題，保證圖片清晰度和頁面質量。