HTML動畫效果是指通過CSS動畫控制HTML元素的屬性，從而使得網頁具有動態、生動的視覺效果。CSS動畫是CSS3新增的功能特性，可以方便地為網頁添加動態效果，提升用戶體驗。下面我們一起學習HTML動畫效果CSS的使用方法。 首先，我們需要了解幾個CSS動畫的基本屬性：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state。其中，animation-name用于指定動畫名稱，animation-duration用于設置動畫持續時間，animation-timing-function用于設置動畫的緩動效果，animation-delay用于設置動畫延遲播放的時間，animation-iteration-count用于設置動畫播放的次數，animation-direction用于設置動畫播放的方向，animation-play-state用于設置動畫的播放狀態。 接下來，我們看一個簡單的HTML動畫效果CSS的例子：

p {
width: 100px;
height: 100px;
background-color: #333;
animation-name: example;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
@keyframes example {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

上面的代碼中，我們為

標簽添加了動畫，使用了animation-name屬性指定了動畫的名稱為“example”，使用了animation-duration屬性指定動畫持續時間為2秒，使用了animation-timing-function屬性指定了動畫緩動效果為ease-in-out，使用了animation-delay屬性指定了動畫延遲播放時間為0秒，使用了animation-iteration-count屬性指定了動畫播放的次數為無限循環，使用了animation-direction屬性指定動畫播放的方向為交替播放，使用了animation-play-state屬性指定動畫的播放狀態為運行中。 同時，我們使用@keyframes語法指定了動畫的關鍵幀，0%表示動畫開始時的狀態，100%表示動畫結束時的狀態，我們定義了旋轉動畫的效果，將

標簽沿Z軸旋轉360度。 可以看出，HTML動畫效果CSS的使用方法并不復雜，只需要熟悉動畫屬性的含義，并使用@keyframes語法定義動畫的關鍵幀，就可以為網頁添加動態效果，增強視覺體驗。