CSS3 動(dòng)畫(huà)用什么規(guī)則？CSS3 動(dòng)畫(huà)是通過(guò) CSS3 的 @keyframes 規(guī)則來(lái)實(shí)現(xiàn)的。@keyframes 規(guī)則定義了動(dòng)畫(huà)的關(guān)鍵幀，也就是動(dòng)畫(huà)從開(kāi)始到結(jié)束的各個(gè)階段。@keyframes 規(guī)則中使用了百分比值來(lái)描述動(dòng)畫(huà)的不同狀態(tài)。

例如，定義一個(gè)向右移動(dòng)的動(dòng)畫(huà)，可以使用以下代碼：

@keyframes move-right {
0% { left:0; }
100% { left:100%; }
}
.box {
position: relative;
animation-name: move-right;
animation-duration: 2s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}

上述代碼定義了一個(gè)名為 move-right 的動(dòng)畫(huà)，該動(dòng)畫(huà)在開(kāi)始時(shí) left 屬性為 0，結(jié)束時(shí) left 屬性為 100%。然后，通過(guò)將動(dòng)畫(huà)應(yīng)用于 .box 元素，實(shí)現(xiàn)了 .box 元素向右移動(dòng)的動(dòng)畫(huà)效果。

animation-duration 屬性定義了動(dòng)畫(huà)的運(yùn)動(dòng)時(shí)間，本例中為 2 秒。animation-timing-function 屬性定義了動(dòng)畫(huà)的運(yùn)動(dòng)方式，本例中為 ease，即先慢后快，再慢。animation-iteration-count 屬性定義了動(dòng)畫(huà)的重復(fù)次數(shù)，本例中為 infinite，即無(wú)限循環(huán)。

綜上所述，使用 @keyframes 規(guī)則可以實(shí)現(xiàn)豐富多彩的 CSS3 動(dòng)畫(huà)效果，通過(guò)定義不同的關(guān)鍵幀，可以實(shí)現(xiàn)移動(dòng)、旋轉(zhuǎn)、縮放等各種效果，配合各種動(dòng)畫(huà)屬性，可以讓頁(yè)面變得更加動(dòng)感。因此，掌握 CSS3 動(dòng)畫(huà)基礎(chǔ)知識(shí)是建立優(yōu)秀網(wǎng)站的必備技能之一。