最近，CSS動畫火熱進行，許多前端工程師都在探索各種新的CSS動畫效果。今天，我們要介紹的是一種常用的CSS動畫——平面變成碎片。

.animation {
background: url('image.jpg') no-repeat center center / cover;
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
}
.box {
width: 50%;
height: 50%;
float: left;
position: absolute;
transition: transform 1s ease-in-out;
}
.box1 {
top: 0;
left: 0;
background-position: 0 0;
}
.box2 {
top: 0;
right: 0;
background-position: 0 -50%;
}
.box3 {
bottom: 0;
left: 0;
background-position: -50% 0;
}
.box4 {
bottom: 0;
right: 0;
background-position: -50% -50%;
}
.animation:hover .box1 {
transform: translate(-100%, -100%);
}
.animation:hover .box2 {
transform: translate(100%, -100%);
}
.animation:hover .box3 {
transform: translate(-100%, 100%);
}
.animation:hover .box4 {
transform: translate(100%, 100%);
}

首先，我們需要一個具有背景圖片的div，作為動畫的容器。在這個容器中，我們分別創建四個大小相等的子塊，使用float和position來讓它們排列在一起。每個子塊都有不同的背景圖片位置，我們將它們四個拼在一起，形成完整的背景圖。

接下來，在容器hover的時候，我們分別給每個子塊應用不同的transform，在一個短時間內讓它們分別移動到不同的方向上。通過這樣的操作，我們就讓平面變成了碎片，可以讓網頁看起來更精彩和有趣。

當然，這只是CSS動畫中的一個小小的例子。在實際應用中，我們可以使用更多的CSS屬性，組合出各種令人驚嘆的動畫效果。但是，要注意不要濫用CSS動畫，否則會對網站性能造成負面影響。