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动画时，要遵循以下几个原则：

• 动画要流畅，不能过于缓慢或突兀；
• 动画时间要适当，不要太长或太短；
• 动画函数要选择合适的，以获得理想的动画效果。