在CSS中封裝小球運動，可以通過使用@keyframes規(guī)則來創(chuàng)建動畫，以下是一個簡單的示例，展示了一個小球從左側移動到右側的基本運動：

@keyframes ball-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}
.ball {
  width: 50px;
  height: 50px;
  background-color: #333;
  border-radius: 50%;
  position: relative;
  left: 0;
  animation: ball-move 2s linear;
}

在這個示例中，@keyframes規(guī)則定義了一個名為ball-move的動畫，該動畫將小球的transform屬性從translateX(0)變化到translateX(100px)，這意味著小球將從其初始位置（左側）移動到右側100像素的位置。

我們?yōu)?code>.ball類定義了一些樣式，包括寬度、高度、背景顏色、邊框半徑以及初始的left位置，我們通過animation屬性將ball-move動畫應用到小球上，并指定了動畫的持續(xù)時間和速度曲線。

這只是一個簡單的示例，展示了如何在CSS中封裝小球運動，在實際應用中，您可能需要更復雜的動畫效果，包括多個關鍵幀、不同的速度曲線等，但基本的原理是相同的：通過@keyframes規(guī)則定義動畫，然后通過animation屬性將其應用到元素上。