CSS動(dòng)畫(huà)是Web開(kāi)發(fā)中普遍使用的技術(shù)之一。在這篇文章中，我們將聚焦于CSS左右平移動(dòng)畫(huà)。這種動(dòng)畫(huà)技術(shù)可以使元素像用戶(hù)看到的電影一樣移動(dòng)。

.box {
position: relative;
animation-name: move;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes move {
from {
left: 0px;
}
to {
left: 200px;
}
}

在上面的代碼中，我們定義了一個(gè).box類(lèi)，使用了position: relative屬性，使得.box元素成為相對(duì)定位的元素。我們還使用了CSS動(dòng)畫(huà)技術(shù)來(lái)創(chuàng)建指定名稱(chēng)的動(dòng)畫(huà)。在這個(gè)例子中，動(dòng)畫(huà)的名稱(chēng)是move。

接下來(lái)，我們需要設(shè)置動(dòng)畫(huà)的時(shí)間長(zhǎng)度，單位為秒。在這個(gè)例子中，我們?cè)O(shè)置了animation-duration: 2s。這意味著我們的動(dòng)畫(huà)將持續(xù)2秒。

最后，我們使用animation-fill-mode: forwards;屬性。這個(gè)屬性是用來(lái)指定動(dòng)畫(huà)完成后是否保持最后一幀的狀態(tài)。當(dāng)設(shè)置為forwards時(shí)，動(dòng)畫(huà)結(jié)束時(shí)元素將停留在最后一幀的狀態(tài)。

在@keyframes move代碼塊中，我們定義了一個(gè)關(guān)鍵幀動(dòng)畫(huà)。我們從左邊開(kāi)始移動(dòng)元素，從0px位置開(kāi)始，到達(dá)200px位置。因此，我們的動(dòng)畫(huà)將使元素從左向右平移。

總之，這是一個(gè)簡(jiǎn)單的CSS左右平移動(dòng)畫(huà)示例。您可以根據(jù)需要更改box元素的樣式和動(dòng)畫(huà)屬性，從而創(chuàng)建不同類(lèi)型的動(dòng)畫(huà)效果。