CSS位置变动动画是Web开发中常见的一种动画效果，常用于网站主页的图片切换、导航栏的下拉等等。本文将会介绍CSS位置变动动画的基本实现方法。
首先我们需要了解CSS的位置属性，包括position、top、left、right、bottom等。这些属性可以用来控制元素的位置，例如position: relative;表示元素相对于其正常位置的偏移。
.box {
position: relative;
top: 20px;
left: 30px;
}现在我们来实现一个简单的位置变动动画。考虑一个
元素，最开始位于浏览器窗口的中心。我们将它设置为position: absolute;并且利用
calc()函数和负margin值将它移动到中心。.center-box {
position: absolute;
margin: -50px 0 0 -50px;
top: calc(50% - 50px);
left: calc(50% - 50px);
}接着，我们为
元素定义一个动画，将它向右移动200px。
.center-box {
position: absolute;
margin: -50px 0 0 -50px;
top: calc(50% - 50px);
left: calc(50% - 50px);
animation-name: move-right;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes move-right {
0% {left: calc(50% - 50px);}
50% {left: calc(50% + 150px);}
100% {left: calc(50% - 50px);}
}这里我们使用了@keyframes和animation属性来定义动画。其中@keyframes用来定义动画的关键帧，animation用来指定动画名称、持续时间和循环次数。
在以上代码中，我们定义了一个名为move-right的动画，将
元素的左侧位置从初始值向右移动150px，再返回到原来的位置。我们将它设置为无限循环，因此它会一直执行下去。
以上就是CSS位置变动动画的基本实现方法。通过控制元素的位置和使用动画属性，我们可以实现丰富多彩的动画效果。