CSS動畫偏移是一種常見的動畫效果，它能讓網頁中的元素在垂直或水平方向上沿著一條路徑移動。這種效果可以讓網頁更加生動有趣，引起用戶的注意。

/* 實現垂直方向上的偏移動畫效果 */
/* 定義動畫路徑 */
@keyframes vertical-offset {
from { transform: translateY(0); }
to { transform: translateY(50px); }
}
/* 應用動畫效果 */
.element {
animation: vertical-offset 1s infinite alternate;
}

上面的代碼演示了如何實現垂直方向上的偏移動畫效果。首先，使用@keyframes關鍵字定義了一個名為"vertical-offset"的動畫路徑，該動畫路徑在元素的初始位置和距離初始位置50像素的位置之間不停地來回偏移。接著，在元素的樣式中應用了該動畫路徑，設置動畫時間為1秒，重復次數為無限，交替反向播放。

/* 實現水平方向上的偏移動畫效果 */
/* 定義動畫路徑 */
@keyframes horizontal-offset {
0% { transform: translateX(0); }
25% { transform: translateX(50px); }
50% { transform: translateX(100px); }
75% { transform: translateX(50px); }
100% { transform: translateX(0); }
}
/* 應用動畫效果 */
.element {
animation: horizontal-offset 2s infinite;
}

如果要實現水平方向上的偏移動畫效果，可以使用@keyframes關鍵字定義一個名為"horizontal-offset"的動畫路徑。在該動畫路徑中，元素在25%、50%和75%的時間點處分別偏移50、100和50像素位置，實現了一個沿著鋸齒形路徑移動的效果。最后，在元素的樣式中應用該動畫路徑，設置動畫時間為2秒，重復次數為無限。