CSS transition只改变位置

CSS transition是一种让网页元素的变化更加平滑的技术。它可以让我们的网页看起来更加精美。在使用CSS transition时，我们可以选择改变元素的位置，大小，颜色，透明度等等。但是，如果我们只想改变元素的位置，该怎么实现呢？

/* 定义元素的初始位置和过渡效果 */
.Box {
  position: absolute;   /* 元素的定位方式设置为绝对定位 */
  left: 0;              /* 初始时元素的left值为0 */
  top: 0;               /* 初始时元素的top值为0 */
  transition: all 1s;   /* 过渡效果的时长为1秒 */
}

/* 定义元素的新位置 */
.Box:hover {
  left: 200px;          /* 当鼠标悬停时，元素向右移动200px */
  top: 100px;           /* 当鼠标悬停时，元素向下移动100px */
}

以上代码我们通过设置初始时元素的left和top值为0，然后在:hover伪类中改变元素的left和top值，实现了元素位置的改变。

如果我们想要控制元素向上，向下，向左，向右等不同方向的移动，可以通过设置元素的transform属性来实现。例如：

/* 定义元素的初始位置和过渡效果 */
.Box {
  position: absolute;   /* 元素的定位方式设置为绝对定位 */
  left: 0;              /* 初始时元素的left值为0 */
  top: 0;               /* 初始时元素的top值为0 */
  transition: all 1s;   /* 过渡效果的时长为1秒 */
}

/* 定义元素的新位置 */
.Box:hover {
  transform: translate(200px,100px);          /* 当鼠标悬停时，元素向右移动200px，向下移动100px */
}

以上代码我们通过设置:hover伪类中的transform属性，使用translate函数来控制元素的移动方向和距离。

总之，如果我们只想要改变元素的位置，可以通过设置元素的left和top值或者transform属性，以达到更加平滑的动画效果。