CSS多張圖片合成動畫是一種常用的網頁設計技術。通過將多張分散的圖片融合成一張合成圖，并利用CSS3的動畫屬性展現出動態效果，可以實現各種生動的圖形效果。

/* 將多張圖片合成一張圖片 */
.sprite {
background-image: url(images/sprite.png);
background-repeat: no-repeat;
overflow: hidden;
display: inline-block;
}
/* 設置每個小圖像的位置和大小 */
.logo {
width: 50px;
height: 50px;
margin: 0 5px;
/* 利用背景圖像的定位屬性，將小圖像擺放到正確的位置上 */
background-position: -50px -50px;
}
.search {
width: 50px;
height: 50px;
margin: 0 5px;
background-position: 0 -50px;
}
.cart {
width: 50px;
height: 50px;
margin: 0 5px;
background-position: -100px -50px;
}
/* 定義動畫效果 */
.sprite:hover .logo {
animation: logo 0.5s linear infinite alternate;
}
.sprite:hover .search {
animation: search 0.5s linear infinite alternate;
}
.sprite:hover .cart {
animation: cart 0.5s linear infinite alternate;
}
/* 分別定義每個小圖像的動畫效果 */
@keyframes logo {
0% { transform: translateX(0); }
100% { transform: translateX(-50px); }
}
@keyframes search {
0% { transform: translateY(0); }
100% { transform: translateY(-50px); }
}
@keyframes cart {
0% { transform: translateX(0) rotate(0); }
100% { transform: translateX(-50px) rotate(360deg); }
}

上述代碼中，我們首先定義了一個.sprite類，將多張分散的小圖像合并成一張圖片。然后，我們分別定義每個小圖像的位置和大小，并利用背景圖像的定位屬性將其擺放到正確的位置上。

最后，我們利用CSS3的動畫屬性，分別定義每個小圖像的動畫效果。這里我們使用了關鍵幀@keyframes規則，通過在每個關鍵幀中定義具體的樣式，可以實現各種復雜的動畫效果。其中，我們以.logo為例，定義了一個簡單的左右擺動的動畫效果。當鼠標懸停在.sprite類上時，我們將觸發這三個小圖像各自的動畫效果，實現整張合成圖的生動運動。