HTML是網(wǎng)頁(yè)的重要組成部分，我們可以通過(guò)CSS來(lái)為HTML元素添加動(dòng)畫，使頁(yè)面更加生動(dòng)，更具吸引力。下面我們就來(lái)了解一下如何在HTML中使用CSS動(dòng)畫。

/* 首先，我們需要為需要添加動(dòng)畫的元素添加一個(gè)類名 */
.example {
/* 設(shè)置動(dòng)畫持續(xù)時(shí)間為1秒，動(dòng)畫樣式為ease-in-out */
animation: my-animation 1s ease-in-out;
}
/* 接著，我們需要定義動(dòng)畫keyframes */
@keyframes my-animation {
/* 定義動(dòng)畫開始的屬性值 */
from {
transform: translateX(0);
}
/* 定義動(dòng)畫結(jié)束的屬性值 */
to {
transform: translateX(100px);
}
}

以上代碼中的.example是我們要添加動(dòng)畫的元素類名，my-animation是動(dòng)畫名稱，animation屬性定義動(dòng)畫的持續(xù)時(shí)間和動(dòng)畫樣式。在@keyframes中，我們通過(guò)from和to分別定義動(dòng)畫的開始和結(jié)束狀態(tài)，并將元素向右移動(dòng)100px。

為了更好地控制動(dòng)畫的過(guò)渡效果，我們可以為元素添加其他CSS屬性，例如opacity（透明度）、background-color（背景色）等，這樣可以讓動(dòng)畫的效果更加豐富。

除了使用關(guān)鍵幀動(dòng)畫外，我們還可以使用CSS的transition屬性實(shí)現(xiàn)簡(jiǎn)單動(dòng)畫效果。例如：

.example {
/* 定義過(guò)渡時(shí)間為0.3秒 */
transition: all 0.3s;
}
.example:hover {
/* 鼠標(biāo)懸停時(shí)，元素背景色變?yōu)榧t色 */
background-color: red;
/* 將元素向右移動(dòng)10px */
transform: translateX(10px);
}

以上代碼中，我們定義了一個(gè)例子，當(dāng)鼠標(biāo)懸停在元素上時(shí)，元素的背景色會(huì)變成紅色，并向右移動(dòng)10px。我們通過(guò)CSS的transition屬性來(lái)定義動(dòng)畫的持續(xù)時(shí)間和動(dòng)畫效果，從而實(shí)現(xiàn)動(dòng)態(tài)效果。

CSS動(dòng)畫可以為網(wǎng)頁(yè)增加視覺(jué)效果，吸引用戶的眼球。我們可以使用關(guān)鍵幀動(dòng)畫或過(guò)渡動(dòng)畫來(lái)實(shí)現(xiàn)，需要注意合理定義動(dòng)畫屬性，以達(dá)到更好的視覺(jué)效果。希望這篇文章能幫助你更好地理解CSS動(dòng)畫。