CSS3 animation是一項廣泛使用的Web技術，它可以為你的網站帶來更生動、更吸引人的視覺效果。在這篇文章中，我們將介紹CSS3 animation的基礎知識和用法。

/*基礎知識*/
動畫是通過在指定的時間內，改變元素的一些屬性值來實現的。每個CSS屬性都可以被動畫化，包括尺寸、顏色、位置、旋轉和透明度等。CSS3 animation有兩個關鍵組成部分——動畫規則和動畫關鍵幀。

動畫規則定義了動畫如何應用于元素。以下是最基本的動畫規則：

/*動畫規則*/
div {
animation: myanimation 3s;  /* 動畫名稱和持續時間 */
}
@keyframes myanimation { /* 動畫關鍵幀 */
from {transform: rotate(0deg);} /* 初始狀態 */
to {transform: rotate(360deg);} /* 結束狀態 */
}

在上面的例子中，我們使用了div元素，將一個名為myanimation的動畫應用于它，使它在3秒內沿順時針方向旋轉360度。我們定義了動畫關鍵幀@keyframes，使用了transform屬性來改變旋轉狀態，從0度到360度。

/* 動畫屬性的詳細用法 */
animation-name：設置動畫的名稱；
animation-duration：設置動畫的持續時間；
animation-timing-function：設置動畫的速率曲線；
animation-delay：設置動畫的延遲時間；
animation-iteration-count：設置動畫的重復次數；
animation-direction：設置動畫的播放方向；
animation-fill-mode：設置動畫在動畫之前和之后如何呈現。

下面是一個簡單的例子：

/*例子*/
div {
animation-name: myanimation;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
}
@keyframes myanimation {
from {background-color: red;}
to {background-color: blue;}
}

在這個例子中，div元素將以ease-in-out的速率曲線，以2秒的持續時間，在1秒后開始動畫，并無限重復，在動畫期間，它的背景顏色將從紅色漸變為藍色。

你現在有基礎的CSS3 animation知識了，開始制作更有趣的動畫吧！