CSS3動畫是Web開發中不可或缺的一部分，它允許我們通過CSS來創建各種各樣的動畫效果。今天我們將學習如何使用CSS3動畫來創建一個球滾動的效果。

.ball{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 50px;
height: 50px;
background-color: #f00;
border-radius: 50%;
animation: roll 2s infinite;
}
@keyframes roll{
0% {
transform: rotate(0deg) translate(-50%,-50%);
}
100% {
transform: rotate(360deg) translate(-50%,-50%);
}
}

首先我們創建一個class為“ball”的div，給它添加了一些基本樣式，包括定位、大小、背景色和圓角等。我們通過將它的位置移動到頁面的中心來保證它始終居中。

然后，我們定義了一個“roll”動畫，將球旋轉360度并沿著X軸向右滾動。我們在0%和100%的關鍵幀上定義了球的位置和旋轉角度，通過transform屬性實現這一效果。最后，我們將動畫應用于球的“animation”屬性中，并設置它無限循環。

現在，當你在你的網站上放置這個球時，你會看到它在無限循環地滾動著。 通過使用CSS3動畫，我們可以輕松地為我們的網站添加一些交互性和生動性！