CSS動(dòng)畫(huà)是通過(guò)使用CSS屬性而不是JavaScript來(lái)實(shí)現(xiàn)的動(dòng)態(tài)效果。下面是介紹四種基本的CSS動(dòng)畫(huà)。

1. 過(guò)渡動(dòng)畫(huà)

元素 {
過(guò)渡屬性：屬性名稱(chēng) 時(shí)間 動(dòng)畫(huà)類(lèi)型;
}
元素：hover {
屬性名稱(chēng): 值;
}

元素的過(guò)渡屬性用于指定過(guò)渡的屬性名稱(chēng)、時(shí)間、動(dòng)畫(huà)類(lèi)型。當(dāng)元素狀態(tài)改變時(shí)，過(guò)渡動(dòng)畫(huà)就會(huì)發(fā)生。例如，當(dāng)鼠標(biāo)懸停在一個(gè)元素上時(shí)，屬性值會(huì)發(fā)生改變，從而觸發(fā)元素的過(guò)渡動(dòng)畫(huà)。

2. 關(guān)鍵幀動(dòng)畫(huà)

@keyframes 動(dòng)畫(huà)名稱(chēng) {
0% {屬性名稱(chēng): 開(kāi)始值;}
50% {屬性名稱(chēng): 中間值;}
100% {屬性名稱(chēng): 結(jié)束值;}
}
元素 {
動(dòng)畫(huà)名稱(chēng): 動(dòng)畫(huà)名稱(chēng);
}

關(guān)鍵幀動(dòng)畫(huà)通過(guò)在不同時(shí)間點(diǎn)設(shè)置不同的屬性值來(lái)創(chuàng)建動(dòng)畫(huà)。動(dòng)畫(huà)名稱(chēng)用于指定關(guān)鍵幀動(dòng)畫(huà)的名稱(chēng)，然后在元素上應(yīng)用該名稱(chēng)，從而創(chuàng)建動(dòng)畫(huà)。

3. 旋轉(zhuǎn)動(dòng)畫(huà)

元素 {
transform：rotate(角度);
}

旋轉(zhuǎn)動(dòng)畫(huà)可以用來(lái)使元素沿著X、Y或Z軸旋轉(zhuǎn)，可以旋轉(zhuǎn)不同的角度。這是用于旋轉(zhuǎn)元素的基本屬性之一。

4. 變形動(dòng)畫(huà)

元素 {
transform：scale(比例);
}

變形動(dòng)畫(huà)常用于創(chuàng)建元素大小不斷變化的動(dòng)畫(huà)效果。該屬性用于指定元素的比例，從而縮放元素的大小。