CSS3是一個(gè)非常強(qiáng)大的前端技術(shù)，它可以實(shí)現(xiàn)各種效果，其中之一就是反復(fù)移動(dòng)的效果。下面我們可以通過(guò)實(shí)例來(lái)學(xué)習(xí)如何實(shí)現(xiàn)反復(fù)移動(dòng)的效果。

.box {
position: relative;
animation: move 3s infinite;
}
@keyframes move {
0% {
left: 0;
transform: rotate(0deg);
}
50% {
left: 100%;
transform: rotate(180deg);
}
100% {
left: 0;
transform: rotate(360deg);
}
}

我們通過(guò)為元素添加animation屬性，來(lái)實(shí)現(xiàn)反復(fù)移動(dòng)的效果。其中，move關(guān)鍵字表示我們定義的動(dòng)畫名稱，3s表示動(dòng)畫的播放時(shí)間，infinite表示動(dòng)畫會(huì)一直反復(fù)播放。

接下來(lái)我們定義了keyframes，通過(guò)關(guān)鍵幀的方式來(lái)定義動(dòng)畫的過(guò)程。0%表示動(dòng)畫開(kāi)始時(shí)的狀態(tài)，此處設(shè)置left和rotate的值為0，即元素不移動(dòng)且不旋轉(zhuǎn)。50%表示動(dòng)畫播放到一半時(shí)的狀態(tài)，此處設(shè)置left的值為100%，即元素移動(dòng)到了頁(yè)面的最右側(cè)，并且設(shè)置rotate的值為180度，表示元素沿Y軸翻轉(zhuǎn)了一定角度。100%表示動(dòng)畫結(jié)束時(shí)的狀態(tài)，此處設(shè)置left的值為0，即元素回到了起點(diǎn)，并且設(shè)置rotate的值為360度，表示元素沿Y軸旋轉(zhuǎn)了一圈。

最后，我們將動(dòng)畫應(yīng)用到了.box元素上，這樣該元素就可以反復(fù)移動(dòng)了。