CSS動(dòng)畫(huà)給我們的網(wǎng)站帶來(lái)了更加生動(dòng)、豐富的交互體驗(yàn)。我們可以通過(guò)CSS來(lái)實(shí)現(xiàn)各種各樣的動(dòng)畫(huà)效果。在CSS中，有兩種基本的動(dòng)畫(huà)方式：過(guò)渡（Transition）和變形（Transform）。

首先，我們來(lái)看一下過(guò)渡（Transition）動(dòng)畫(huà)。在CSS中，過(guò)渡即指在屬性從一種狀態(tài)變?yōu)榱硪环N狀態(tài)時(shí)，通過(guò)CSS樣式對(duì)其進(jìn)行平滑的過(guò)渡。比如，我們可以通過(guò)過(guò)渡動(dòng)畫(huà)來(lái)實(shí)現(xiàn)鼠標(biāo)懸停時(shí)的顏色漸變效果。

.box{
width: 200px;
height: 200px;
background-color: #f00;
transition: background-color 1s ease;
}
.box:hover{
background-color: #00f;
}

上述代碼中，我們定義了一個(gè)具有紅色背景色的小方塊，然后在鼠標(biāo)懸停時(shí)，通過(guò)改變背景顏色來(lái)實(shí)現(xiàn)顏色漸變效果。其中，transition屬性指定了過(guò)渡效果，background-color表示要過(guò)渡的屬性，1s表示過(guò)渡持續(xù)時(shí)間，ease表示過(guò)渡方式。

另一種動(dòng)畫(huà)方式是變形（Transform）。變形即指在不改變?cè)卣紦?jù)空間的前提下，改變?cè)氐男螤睢⒋笮　⑽恢玫取１热纾覀兛梢酝ㄟ^(guò)變形動(dòng)畫(huà)來(lái)實(shí)現(xiàn)元素的旋轉(zhuǎn)、縮放、位移等效果。

.box{
width: 100px;
height: 100px;
background-color: #f00;
transform: rotate(45deg);
}

上述代碼中，我們定義了一個(gè)具有紅色背景色的小方塊，并且通過(guò)transform屬性將其旋轉(zhuǎn)了45度。

當(dāng)然，過(guò)渡和變形可以同時(shí)使用，比如我們可以通過(guò)過(guò)渡動(dòng)畫(huà)實(shí)現(xiàn)顏色漸變，然后在顏色變化完成后，再通過(guò)變形動(dòng)畫(huà)實(shí)現(xiàn)旋轉(zhuǎn)效果。

.box{
width: 200px;
height: 200px;
background-color: #f00;
transition: background-color 1s ease;
}
.box:hover{
transform: rotate(360deg);
}

上述代碼中，我們先使用過(guò)渡動(dòng)畫(huà)實(shí)現(xiàn)顏色漸變，然后在鼠標(biāo)懸停時(shí)，通過(guò)變形動(dòng)畫(huà)實(shí)現(xiàn)小方塊的旋轉(zhuǎn)。其中，rotate(360deg)表示將元素旋轉(zhuǎn)360度。

總之，CSS動(dòng)畫(huà)給我們提供了很多豐富的交互效果，而過(guò)渡和變形是其中最為基礎(chǔ)、常用的兩種動(dòng)畫(huà)方式。通過(guò)這兩種動(dòng)畫(huà)方式的靈活運(yùn)用，我們可以輕松地實(shí)現(xiàn)各種各樣的動(dòng)畫(huà)效果。