圖片碎片合成動畫是一種讓圖片在頁面上以獨特的方式展示的效果。現在我們可以使用 CSS 實現這一效果，代碼如下：

.container {
width: 400px;
height: 400px;
background: url('image.jpg') no-repeat;
background-size: 800px 800px;
}
@keyframes fragment {
0% {
background-position: 0px 0px;
}
100% {
background-position: -400px -400px;
}
}
.container:hover {
animation: fragment 2s ease forwards;
}

首先，我們需要一個包含圖片的容器。這個容器的大小要和圖片大小相匹配，同時指定背景圖片并將其居中顯示。

接著，我們使用 CSS 的動畫功能，在容器上綁定一個名為 fragment 的動畫，并在其中定義從 0% 到 100% 的關鍵幀，控制背景圖片的位置。通過改變背景圖片的位置來實現圖片的切割和移動效果。

最后，我們使用 CSS 的:hover 偽類，當鼠標懸停在容器上時觸發動畫效果。

以上就是實現圖片碎片合成動畫的基本 CSS 代碼。當然，我們還可以通過修改關鍵幀、調整動畫參數等方式來改變效果的表現形式。希望這篇文章對您有所幫助。