CSS動(dòng)畫(huà)是網(wǎng)頁(yè)設(shè)計(jì)中常見(jiàn)的效果之一，它可以為網(wǎng)頁(yè)增加更多的交互性和視覺(jué)效果。以下是幾種常見(jiàn)的CSS動(dòng)畫(huà)效果：

/* 位置移動(dòng)動(dòng)畫(huà) */
.box {
position: relative;
animation: move 2s infinite;
}
@keyframes move {
0% {left: 0;}
50% {left: 50%;}
100% {left: 0;}
}
/* 字體顏色變化動(dòng)畫(huà) */
.text {
color: rgb(255, 0, 0);
transition: color 1s;
}
.text:hover {
color: rgb(0, 255, 0);
}
/* 旋轉(zhuǎn)動(dòng)畫(huà) */
.shape {
width: 100px;
height: 100px;
background: blue;
animation: rotate 2s infinite;
}
@keyframes rotate {
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg);}
100% {transform: rotate(360deg);}
}

第一種動(dòng)畫(huà)是位置移動(dòng)動(dòng)畫(huà)，通過(guò)改變?cè)氐膌eft屬性值，實(shí)現(xiàn)從原位置到另外一個(gè)位置的平滑過(guò)渡。需要注意的是，動(dòng)畫(huà)效果需要定義在@keyframes里面，并通過(guò)animation屬性綁定到元素上。

第二種動(dòng)畫(huà)是字體顏色變化動(dòng)畫(huà)，通過(guò)添加鼠標(biāo)懸停狀態(tài)下的CSS樣式，實(shí)現(xiàn)動(dòng)態(tài)修改元素的顏色。使用transition屬性可以讓顏色變化更加平滑。

第三種動(dòng)畫(huà)是旋轉(zhuǎn)動(dòng)畫(huà)，通過(guò)@keyframes定義循環(huán)的關(guān)鍵幀，利用transform屬性實(shí)現(xiàn)旋轉(zhuǎn)。同樣需要使用animation屬性進(jìn)行綁定。

以上三種動(dòng)畫(huà)僅是眾多CSS動(dòng)畫(huà)效果中的一部分，可以根據(jù)需求進(jìn)行更多的創(chuàng)新和變化，為網(wǎng)頁(yè)設(shè)計(jì)增加更多的魅力。