CSS3動畫是現代Web開發中不可缺少的一個技術。它允許我們通過代碼來實現豐富的動態效果，使Web頁面更加生動有趣。為了實現這些動畫效果，我們需要掌握一些添加動畫規則的基本知識。

在CSS3中，我們可以使用關鍵幀動畫和過渡動畫兩種方式來實現動畫效果。下面分別介紹這兩種方式的添加規則：

關鍵幀動畫

關鍵幀動畫允許我們定義一個動畫序列，指定每個關鍵幀的狀態，并在這些狀態之間自動進行過渡。

/* 定義一個關鍵幀動畫 */
@keyframes myAnimation {
0% {
opacity: 0;
transform: translateX(-100%);
}
50% {
opacity: 0.5;
transform: translateX(0);
}
100% {
opacity: 1;
transform: translateX(100%);
}
}
/* 應用動畫到元素 */
.my-element {
animation: myAnimation 2s ease-in-out infinite;
}

在上述關鍵幀動畫的代碼中，我們定義了一個名為myAnimation的動畫序列，其中逐幀指定了元素在不同時間點的狀態（0%代表動畫開始時的狀態，100%代表動畫結束時的狀態）。接著，我們通過animation屬性將動畫應用到了一個名為my-element的元素上，規定了動畫的時長、緩動函數、循環次數等參數。

過渡動畫

過渡動畫允許我們為元素的樣式屬性指定起始值和最終值，使這些屬性在變化時產生漸變效果。

/* 定義一個過渡動畫 */
.my-element {
transition: width 1s ease-in-out;
}
/* 指定狀態改變后的樣式 */
.my-element:hover {
width: 200px;
}

在上述過渡動畫的代碼中，我們通過transition屬性為一個名為my-element的元素的width屬性指定了起始值和最終值，指定了動畫的時長和緩動函數。然后通過:hover偽類為元素指定了鼠標懸停時的狀態，從而觸發過渡動畫。

以上就是關鍵幀動畫和過渡動畫的添加規則。掌握這些基本知識將有助于我們創建出更加生動有趣的Web頁面。