CSS的位移動畫是網站中常見的動畫效果之一，它通過使用transition或animation屬性來實現，讓元素在頁面上平滑移動或滑動。

在CSS中，有三種位移動畫：translate、rotate和scale。其中，translate表示元素在平面上的位移，rotate表示元素在平面上的旋轉，而scale表示元素的縮放。

下面是一個使用translate屬性實現位移動畫的示例：

.box {
width: 100px;
height: 100px;
background-color: red;
transition: transform .3s ease-in-out;
}
.box:hover {
transform: translateX(50px);
}

上述代碼中，我們通過設置.box元素的transition屬性來指定動畫的時間、動畫函數和屬性，然后在:hover偽類中設置transform屬性來觸發動畫。在此示例中，我們使用了translateX函數來指定元素在X軸上的移動距離。

下面是另一個使用animation屬性實現位移動畫的示例：

@keyframes slide {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: slide .5s ease-in-out;
}

上述代碼中，我們通過設置@keyframes規則來定義動畫的關鍵幀，從而實現元素從左側滑入的效果。然后，我們在.box元素中使用animation屬性來指定動畫名稱、時間和動畫函數。

無論是使用transition還是animation屬性，都可以實現漂亮的位移動畫效果。需要注意的是，在編寫CSS動畫時，要遵循以下幾個原則：

• 動畫要流暢，不能過于緩慢或突兀；
• 動畫時間要適當，不要太長或太短；
• 動畫函數要選擇合適的，以獲得理想的動畫效果。