在CSS中，動畫是通過使用@keyframes規則來定義的。我們可以使用這個規則來在不同的時間點設置元素的樣式，從而實現動畫效果。

/* 定義動畫 */
@keyframes ball {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
/* 應用動畫 */
.ball {
animation-name: ball;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

上面的代碼實現了一個簡單的球的動畫。從左邊移動到右邊，然后回到左邊，不斷重復。下面是具體的步驟：

1. 首先，我們需要一個球的元素。可以用
   標簽表示，也可以用其他標簽。這里我們用

   標簽，給它一個類名“ball”，并設置一些基本的樣式：

.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
}

2. 然后，我們定義一個@keyframes規則，叫做“ball”。這個規則包含了兩個關鍵幀：“from”和“to”。在“from”幀中，球的位置是在左邊，用“translateX(0)”表示；在“to”幀中，球的位置是在右邊，用“translateX(100px)”表示。

@keyframes ball {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}

3. 接下來，我們把動畫應用到球的元素上。使用“animation-name”屬性指定動畫名稱，使用“animation-duration”屬性指定動畫持續時間，使用“animation-timing-function”屬性指定動畫的時間函數，使用“animation-iteration-count”屬性指定動畫重復次數。

.ball {
animation-name: ball;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}