CSS3 動(dòng)畫是近年來在 Web 開發(fā)中被廣泛應(yīng)用的技術(shù)，它通過 CSS3 的樣式特性實(shí)現(xiàn)動(dòng)效，使得頁面更加生動(dòng)、有趣。以下是一個(gè)使用 CSS3 動(dòng)畫的案例：

/* 定義動(dòng)畫 */
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
/* 應(yīng)用動(dòng)畫 */
.element {
animation: pulse 2s infinite;
}

上面的代碼定義了一個(gè)名為 pulse 的動(dòng)畫，它會讓元素在 2 秒內(nèi)不斷縮放，變化效果類似于心跳。在 element 元素上應(yīng)用這個(gè)動(dòng)畫，即可讓該元素具備動(dòng)態(tài)效果。

圖標(biāo)旋轉(zhuǎn)是另一個(gè)常見的 CSS3 動(dòng)畫應(yīng)用，以下是一個(gè)實(shí)現(xiàn)圖標(biāo)旋轉(zhuǎn)的案例：

/* 定義動(dòng)畫 */
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
/* 應(yīng)用動(dòng)畫 */
.icon {
animation: rotate 2s infinite linear;
}

上面的代碼定義了一個(gè)名為 rotate 的動(dòng)畫，它會讓元素在 2 秒內(nèi)順時(shí)針不斷旋轉(zhuǎn)。在 icon 元素上應(yīng)用這個(gè)動(dòng)畫，即可讓該元素旋轉(zhuǎn)。

CSS3 動(dòng)畫還可以用來制作過渡效果，讓元素在狀態(tài)變化時(shí)更加平滑。以下是一個(gè)實(shí)現(xiàn)過渡效果的案例：

/* 定義狀態(tài) */
.box {
background-color: #f00;
transition: background-color 1s ease-in-out;
}
.box:hover {
background-color: #0f0;
}

上面的代碼定義了一個(gè)元素 box，它在默認(rèn)狀態(tài)時(shí)背景顏色為紅色，在鼠標(biāo)懸浮時(shí)背景色轉(zhuǎn)變?yōu)榫G色。為了讓這一個(gè)狀態(tài)變化更加平滑，我們使用了 transition 屬性，并指定了過渡時(shí)間和過渡方式。這樣，當(dāng)鼠標(biāo)從默認(rèn)狀態(tài)移動(dòng)到懸浮狀態(tài)時(shí)，box 的背景色將會緩慢轉(zhuǎn)變?yōu)榫G色，實(shí)現(xiàn)了過渡效果。

以上就是一些常見的 CSS3 動(dòng)畫案例，通過應(yīng)用這些技術(shù)，我們可以打造更加吸引人的網(wǎng)頁。