CSS可以為網頁添加各種各樣的效果，其中動圖是最受歡迎的一種。在CSS中添加動圖可以讓網站更具吸引力和互動性，下面是一個簡單的介紹。

/*CSS代碼*/
#image{
background-image: url("動圖.gif");
width: 500px;
height: 350px;
background-size: cover;
animation: play 2s infinite;
}
@keyframes play{
0%{background-position: 0px 0px;}
100%{background-position: -600px 0px;}
}

如上代碼所示，通過在CSS中添加background-image屬性和動圖的url，就可以將動圖添加到頁面上了。在此基礎上，我們還可以使用animation屬性和keyframes屬性為動圖添加播放效果。

animation屬性可以使動圖在頁面上播放。在animation屬性中，有三個參數需要設置，分別是動畫名稱，動畫時長和動畫播放次數。上述代碼中，動畫名稱為play，時長為2s，播放次數為infinite。

keyframes屬性則是定義動畫播放的具體效果。通過設置0%到100%不同的屬性值，就可以實現動畫的過渡效果。在上述代碼中，設置了動畫播放從0%到100%時，背景圖片的位置從0px 0px到-600px 0px。

在以上這些屬性的基礎上，可以使用其他CSS樣式屬性對動圖進行自定義，創造出更多豐富多彩的效果，為網頁增添更多活力和趣味性。