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

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

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

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

另一種動畫方式是變形（Transform）。變形即指在不改變元素占據(jù)空間的前提下，改變元素的形狀、大小、位置等。比如，我們可以通過變形動畫來實(shí)現(xiàn)元素的旋轉(zhuǎn)、縮放、位移等效果。

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

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

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

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

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

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