CSS動(dòng)畫(huà)是網(wǎng)頁(yè)設(shè)計(jì)中一個(gè)非常重要的部分，可以讓頁(yè)面更加生動(dòng)有趣，吸引用戶的注意力。其中一個(gè)常見(jiàn)的動(dòng)畫(huà)效果就是w變t再變u，即讓一個(gè)元素從一個(gè)形態(tài)變化成另一個(gè)形態(tài)。

下面是一個(gè)簡(jiǎn)單的例子，我們將一個(gè)方塊從寬度為50px變化到寬度為100px，再變化到高度為100px，最后變化成一個(gè)圓形：

.box{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
transition: all .5s ease;
}
.box:hover{
width: 100px;
height: 100px;
border-radius: 0%;
background-color: blue;
}

在這個(gè)例子中，我們給方塊的CSS屬性設(shè)置了過(guò)渡效果，當(dāng)鼠標(biāo)懸停在方塊上時(shí)，CSS會(huì)自動(dòng)將其寬度、高度、邊框半徑、背景顏色等屬性從初始狀態(tài)過(guò)渡到懸停狀態(tài)，形成一個(gè)平滑的動(dòng)畫(huà)效果。

當(dāng)然，這只是w變t再變u動(dòng)畫(huà)的一種簡(jiǎn)單示例，實(shí)際上它可以應(yīng)用于很多不同的元素，包括文字、圖片、背景色等等。只要我們合理地運(yùn)用過(guò)渡效果、動(dòng)畫(huà)關(guān)鍵幀和transform等CSS屬性，就能創(chuàng)造出更加豐富多彩、形式各異的動(dòng)畫(huà)效果。