左右移動(dòng)動(dòng)畫是一種非常常見的網(wǎng)頁動(dòng)畫效果，它可以讓我們的頁面看起來更加生動(dòng)、有趣。下面就讓我們通過CSS的代碼來實(shí)現(xiàn)這種動(dòng)畫效果。

/* 先定義一個(gè)動(dòng)畫屬性 */
@keyframes move {
/* 定義起始位置 */
0% {
margin-left: 0px;
}
/* 定義結(jié)束位置 */
100% {
margin-left: 500px;
}
}
/* 給要添加動(dòng)畫的元素添加動(dòng)畫屬性 */
.box {
animation-name: move; /* 名稱對(duì)應(yīng)上方定義的動(dòng)畫名稱 */
animation-duration: 2s; /* 持續(xù)時(shí)間 */
animation-iteration-count: infinite; /* 循環(huán)次數(shù)，此處一直循環(huán) */
animation-direction: alternate; /* 循環(huán)反復(fù)，左右移動(dòng) */
}

上面的代碼中，首先我們定義了一個(gè)名為“move”的動(dòng)畫屬性，其中0%表示起始位置，而100%表示結(jié)束位置。當(dāng)我們要給一個(gè)元素添加這種動(dòng)畫效果時(shí)，需要在該元素的CSS樣式中添加animation-name、animation-duration、animation-iteration-count和animation-direction這四個(gè)屬性。這樣就可以實(shí)現(xiàn)元素左右移動(dòng)的動(dòng)畫效果了。