在網(wǎng)頁(yè)開發(fā)中，CSS 動(dòng)畫是一種非常常見(jiàn)和流行的技術(shù)。它可以通過(guò) CSS 來(lái)實(shí)現(xiàn)頁(yè)面元素的平移、縮放、旋轉(zhuǎn)等動(dòng)畫效果，讓頁(yè)面變得更加生動(dòng)和豐富。

要想通過(guò) CSS 實(shí)現(xiàn)動(dòng)畫效果，首先需要設(shè)置一些基本樣式，如元素的位置、大小、顏色等。然后，就可以通過(guò) CSS 的動(dòng)畫屬性來(lái)控制元素的變化過(guò)程。常用的動(dòng)畫屬性包括：

animation: 動(dòng)畫名稱 時(shí)長(zhǎng) 次數(shù) 播放方式 延遲 填充模式;
transition: 屬性名稱 時(shí)長(zhǎng) 播放方式 延遲;

其中，animation 屬性可以設(shè)置多個(gè)動(dòng)畫效果，用逗號(hào)分隔。每個(gè)動(dòng)畫效果又可以設(shè)置多個(gè)諸如 duration、delay、timing-function 等屬性。比如下面這個(gè)例子：

.box {
width: 100px;
height: 100px;
background-color: red;
animation: rotate 2s infinite linear, move 3s 2 alternate;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}

這段代碼中定義了兩個(gè)動(dòng)畫效果，一個(gè)是 rotate 用來(lái)實(shí)現(xiàn)元素的旋轉(zhuǎn)效果，一個(gè)是 move 用來(lái)實(shí)現(xiàn)元素的平移效果。同時(shí)指定了這兩個(gè)動(dòng)畫的時(shí)長(zhǎng)、播放次數(shù)等屬性。

除了 animation 屬性以外，transition 屬性也是一種常用的控制 CSS 動(dòng)畫的方式。它和 animation 的區(qū)別在于，transition 只能實(shí)現(xiàn)單一屬性的動(dòng)畫效果。舉個(gè)例子：

.box:hover {
transform: scale(1.5);
transition: transform 0.5s ease-in-out;
}

這個(gè)例子是當(dāng)鼠標(biāo)懸停在元素上時(shí)，實(shí)現(xiàn)元素放大 1.5 倍的效果。其中 transition 屬性指定了變形屬性 transform 的變化效果。

總之，CSS 動(dòng)畫是一種非常實(shí)用的技術(shù)。它可以讓頁(yè)面元素更加生動(dòng)、豐富，提高用戶的使用體驗(yàn)。熟練掌握 CSS 動(dòng)畫的技巧，可以讓我們的網(wǎng)頁(yè)開發(fā)工作更加高效和優(yōu)雅。