CSS動(dòng)畫是網(wǎng)頁設(shè)計(jì)中不可或缺的一部分，它能夠?yàn)榫W(wǎng)頁帶來精美的動(dòng)態(tài)效果。其中，最常用的兩種動(dòng)畫即為過渡和變換。

/* CSS過渡動(dòng)畫 */
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 1s ease-in-out;
}
.box:hover {
width: 200px;
}
/* CSS變換動(dòng)畫 */
.box2 {
width: 100px;
height: 100px;
background-color: blue;
transition: transform 1s ease-in-out;
}
.box2:hover {
transform: rotate(180deg);
}

首先，我們來看一下過渡動(dòng)畫。在上面的代碼中，我們首先定義了一個(gè)`box`類的div元素，并設(shè)置了其初始的寬和高以及背景色。我們通過`transition`屬性來規(guī)定需要過渡的屬性和過渡的時(shí)間，這里我們需要過渡的屬性為寬度，時(shí)間為1秒。當(dāng)鼠標(biāo)懸停在這個(gè)`box`類的元素上時(shí)，它的寬度會(huì)過渡到200px，因?yàn)槲覀兪褂昧?hover偽類來設(shè)置這個(gè)效果。

接下來，我們再來看一下變換動(dòng)畫。在這個(gè)代碼中，我們定義了一個(gè)`box2`類的div元素，并設(shè)置了其初始的寬和高以及背景色。我們同樣使用`transition`屬性來規(guī)定需要變換的屬性和變換的時(shí)間，這里我們需要變換的屬性為`transform`，時(shí)間為1秒。當(dāng)鼠標(biāo)懸停在這個(gè)`box2`類的元素上時(shí)，它會(huì)被旋轉(zhuǎn)180度，因?yàn)槲覀兪褂昧?hover偽類和`transform`屬性來設(shè)置這個(gè)效果。

綜上所述，過渡和變換動(dòng)畫都是非常實(shí)用的CSS動(dòng)畫效果，它們能夠?yàn)榫W(wǎng)頁設(shè)計(jì)帶來更加豐富的視覺體驗(yàn)。