CSS是网页设计中不可或缺的一部分，可以实现各种炫酷的效果。其中，移动图片是常见的需求之一。但有时候我们想要图片移动，但是又不想改变它的位置，该怎么办呢？下面就让我们来学习一下如何在不改变图片位置的情况下移动它。

.container {
position: relative;
}
.image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes move {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(100px, 0);
}
100% {
transform: translate(0, 0);
}
}
.image:hover {
animation: move 2s ease-in-out infinite;
}

首先，我们需要给图片的容器设置一个position: relative，这可以让图片容器成为定位上下文。然后，把图片的position设置为absolute，这会让图片脱离文档流，并让它成为容器的子元素。接下来，我们用transform将图片定位到容器的中心。

接着，我们用@keyframes定义了一个名为move的动画，让图片在横向移动100像素，并在原地“踏步”。最后，我们使用:hover选择器来触发动画。

这样，我们就成功地实现了图片的位置不变移动啦！