CSS3動畫規則制定包括選擇要進行動畫的元素和指定動畫樣式。CSS3動畫讓我們能夠在網站上創建自定義的、交互性的動畫效果，讓我們的頁面更加生動、有趣、吸引人。

/*選擇元素*/
.element {
animation-name: myAnimation;   /*指定動畫名*/
animation-duration: 2s;       /*動畫執行時間*/
animation-delay: 1s;          /*動畫延遲執行的時間*/
animation-fill-mode: both;    /*動畫執行完后，回到初始狀態，并且保持最后一個關鍵幀的狀態*/
animation-iteration-count: 3; /*動畫的執行次數*/
animation-timing-function: ease-in-out;  /*動畫執行的速度曲線*/
}
/*指定動畫樣式*/
@keyframes myAnimation {
0% {opacity: 0; transform: translateX(-100px);}
50% {opacity: 1; transform: translateX(50px);}
100% {opacity: 0; transform: translateX(100px);}
}

在上面的例子中，我們先指定了要進行動畫的元素，選擇了類名為“element”的元素，然后在元素的樣式中通過animation-name屬性指定了動畫的名稱為“myAnimation”，接著通過animation-duration屬性指定了動畫執行的時間為2秒，animation-delay屬性指定了動畫延遲執行的時間為1秒，animation-fill-mode屬性指定了動畫執行完后，回到初始狀態，并且保持最后一個關鍵幀的狀態，animation-iteration-count屬性指定了動畫的執行次數為3，最后通過animation-timing-function屬性指定了動畫執行的速度曲線為ease-in-out。

在指定動畫的樣式中，我們通過@keyframes規則來定義了動畫的3個關鍵幀，0%表示動畫開始時的狀態，50%表示動畫執行到中間時的狀態，100%表示動畫執行完成時的狀態。在關鍵幀中，我們定義了opacity和transform兩個屬性來實現透明度和位移的變化。