CSS動(dòng)畫(huà)的流行，讓我們的網(wǎng)頁(yè)變得更加生動(dòng)活潑。其中，勻速移動(dòng)動(dòng)畫(huà)是最基本、最簡(jiǎn)單的CSS動(dòng)畫(huà)之一。

/*定義class為box的元素，開(kāi)始勻速移動(dòng)動(dòng)畫(huà)*/
.box {
animation-name: move;
animation-duration: 2s; /*勻速移動(dòng)2秒*/
animation-timing-function: linear; /*設(shè)置為勻速移動(dòng)*/
animation-iteration-count: infinite; /*循環(huán)無(wú)限次*/
}
/*定義move動(dòng)畫(huà)*/
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}

上面的代碼中，我們定義了一個(gè)class為box的元素，并為其設(shè)置勻速移動(dòng)動(dòng)畫(huà)。animation-duration屬性指定了動(dòng)畫(huà)的持續(xù)時(shí)間，設(shè)置為2秒。animation-timing-function屬性使用linear值，表示動(dòng)畫(huà)以勻速的方式進(jìn)行。animation-iteration-count屬性設(shè)置為infinite，表示動(dòng)畫(huà)無(wú)限循環(huán)。

在@keyframes規(guī)則中，我們定義了move動(dòng)畫(huà)。在起始狀態(tài)from中，設(shè)置為元素的初始狀態(tài)；在結(jié)束狀態(tài)to中，設(shè)置為元素移動(dòng)到的最終位置。

實(shí)際使用中，我們可以將class為box的元素應(yīng)用到網(wǎng)頁(yè)的Logo、菜單等部分，給網(wǎng)頁(yè)增加更加生動(dòng)的效果。