CSS動(dòng)畫是通過(guò)CSS樣式表控制元素在頁(yè)面上進(jìn)行動(dòng)態(tài)效果展示的技術(shù)。我們可以利用CSS的一些特性和關(guān)鍵幀動(dòng)畫，讓網(wǎng)頁(yè)元素更加生動(dòng)有趣。

下面是一段CSS動(dòng)畫的代碼，使用了animation關(guān)鍵字：

.box {
animation: myanimation 3s linear infinite;
}
@keyframes myanimation {
0% {
transform: scale(1.2);
}
50% {
transform: scale(1);
opacity: 0.5;
}
100% {
transform: scale(1.2);
}
}

這段代碼會(huì)給class為box的元素添加一個(gè)動(dòng)畫效果，讓元素的大小在3秒鐘內(nèi)從1.2倍到1倍再到1.2倍來(lái)回變化，并在中間的50%時(shí)間讓元素的透明度變?yōu)?.5。

在這里我們用到了幾個(gè)CSS特性：

• animation：用于指定動(dòng)畫的名稱、時(shí)長(zhǎng)、緩動(dòng)函數(shù)和重復(fù)次數(shù)。
• @keyframes：關(guān)鍵幀動(dòng)畫，用于定義動(dòng)畫中的每一個(gè)關(guān)鍵幀。
• transform：CSS3變形屬性，用于對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、平移等變換。
• opacity：設(shè)置元素的不透明度。

在實(shí)際開(kāi)發(fā)中，我們可以利用CSS動(dòng)畫來(lái)優(yōu)化網(wǎng)站UI，讓網(wǎng)站更加生動(dòng)有趣，提高用戶體驗(yàn)。