CSS3動畫示例

/* 設置動畫 */
@keyframes example {
0% {background-color: red;}
50% {background-color: yellow;}
100% {background-color: blue;}
}
/* 應用動畫 */
#box {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 3s;
animation-iteration-count: infinite;
}

CSS3動畫是現代網頁設計中的一個重要技術之一。使用動畫可以給網站帶來更好的用戶體驗和更高的互動性，給用戶帶來更好的視覺效果。下面這個代碼示例演示了如何使用CSS3實現動畫。

@keyframes example {
0% {background-color: red;}
50% {background-color: yellow;}
100% {background-color: blue;}
}
#box {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 3s;
animation-iteration-count: infinite;
}

在這個代碼中，我們首先定義了一個名為example的動畫。動畫由三個關鍵幀組成，每個關鍵幀指定了不同的背景顏色。這個動畫將用于一個id為box的元素上。我們使用animation-name屬性指定動畫名稱，使用animation-duration屬性指定動畫持續時間，使用animation-iteration-count屬性指定動畫重復次數。

這就是一個簡單的CSS3動畫示例。有了CSS3動畫，我們可以輕松地創建更具視覺效果的網頁，并且可以通過動畫來增強用戶對網站的互動性。在實際開發中，我們可以根據需要來創建不同類型的動畫，以滿足不同的設計需求。