CSS3提供了許多強大的動畫效果，其中橫向動畫也是較為常用的一個效果。下面我們就來學習如何實現橫向動畫。

/* HTML結構 */
<div class="box"></div>
/* CSS樣式 */
.box {
width: 100px;
height: 100px;
background-color: red;
animation: move 3s linear infinite;
}
/* 關鍵幀動畫 */
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(300px);
}
}

如上所示，我們首先定義了一個div容器。接下來就是定義該容器的css樣式，我們設置該容器的寬度、高度和背景顏色，并為其定義了一個動畫屬性。該動畫屬性會指向關鍵幀動畫move，這里的屬性值表示該動畫在3秒內以線性方式無限循環運動。

下面，我們進一步學習如何實現關鍵幀動畫。

/* 關鍵幀動畫 */
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(150px);
}
100% {
transform: translateX(300px);
}
}

如上所示，我們定義了一個表示在3秒內由0%逐漸變化到100%的動畫。在這個關鍵幀動畫中，我們設置了三個關鍵點，分別是0%、50%、100%。對于每個關鍵點，我們又為其定義了一個運動動作，該動作的具體內容是將div容器向右移動0px、150px和300px的距離。

除了通過translateX實現橫向動畫，我們還可以通過left屬性實現橫向動畫，如下：

/* CSS樣式 */
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
animation: move 3s linear infinite;
}
/* 關鍵幀動畫 */
@keyframes move {
0% {
left: 0;
}
100% {
left: 300px;
}
}

如上所示，我們定義了一個具有絕對定位的div容器，并設置其left屬性為0。接著，我們為該容器定義了一個運動動畫move，并將其運動方式設為線性，持續時間設為3秒，并使其無限循環。

在關鍵幀動畫中，我們同樣設置了兩個關鍵點，一個是0%，另一個是100%。對于每個關鍵點，我們再次為其定義了一個運動動作，該動作的內容是將div容器向右移動300px的距離。

總的來說，通過以上兩種方式，我們可以完成CSS3橫向動畫效果的實現。同時，我們也要注意瀏覽器的兼容性問題，不同瀏覽器對CSS3動畫的支持有所不同。