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

.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%);
}

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

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

當(dāng)然，這只是CSS動(dòng)畫中的一個(gè)小小的例子。在實(shí)際應(yīng)用中，我們可以使用更多的CSS屬性，組合出各種令人驚嘆的動(dòng)畫效果。但是，要注意不要濫用CSS動(dòng)畫，否則會(huì)對(duì)網(wǎng)站性能造成負(fù)面影響。