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

/*選擇元素*/
.element {
animation-name: myAnimation;   /*指定動畫名*/
animation-duration: 2s;       /*動畫執(zhí)行時間*/
animation-delay: 1s;          /*動畫延遲執(zhí)行的時間*/
animation-fill-mode: both;    /*動畫執(zhí)行完后，回到初始狀態(tài)，并且保持最后一個關鍵幀的狀態(tài)*/
animation-iteration-count: 3; /*動畫的執(zhí)行次數(shù)*/
animation-timing-function: ease-in-out;  /*動畫執(zhí)行的速度曲線*/
}
/*指定動畫樣式*/
@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屬性指定了動畫執(zhí)行的時間為2秒，animation-delay屬性指定了動畫延遲執(zhí)行的時間為1秒，animation-fill-mode屬性指定了動畫執(zhí)行完后，回到初始狀態(tài)，并且保持最后一個關鍵幀的狀態(tài)，animation-iteration-count屬性指定了動畫的執(zhí)行次數(shù)為3，最后通過animation-timing-function屬性指定了動畫執(zhí)行的速度曲線為ease-in-out。

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