css动画效果 位置移动

要实现 CSS 动画效果的位置移动，可以使用 CSS3 的 `transition` 或者 `animation` 属性。下面分别介绍两种实现方法：

使用 `transition` 属性：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1s ease-in-out;
}

.box:hover {
  transform: translateX(100px);
}

上面的代码中，当鼠标移到 `.box` 元素上时，它会向右移动 100px，并在 1 秒内完成这个动作。这个效果是通过 `transform` 属性和 `transition` 属性实现的。

使用 `animation` 属性：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 1s ease-in-out;
}

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

上面的代码中，`animation` 属性指定了一个名为 `move` 的动画，在 1 秒内完成，使用了 `ease-in-out` 的缓动函数。`@keyframes` 规则定义了 `move` 动画的两个关键帧，分别是起始状态和终止状态，使用 `transform` 属性实现了位置移动的效果。