[分享]css3左右来回移动

CSS3提供了许多有趣的动画效果，其中包括左右来回移动的动画效果。通过CSS3中的animation属性，我们可以让元素沿着水平方向来回移动。/ 定义动画 / keyframes move { 0 {...

CSS3提供了许多有趣的动画效果，其中包括左右来回移动的动画效果。通过CSS3中的animation属性，我们可以让元素沿着水平方向来回移动。

/* 定义动画 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}

/* 应用动画 */
div {
  animation: move 2s ease-in-out infinite;
} 

在上面的代码中，我们定义了一个名为move的动画，动画的关键部分在@keyframes选择器中。我们用transform属性来设置元素的水平位置，把元素向右移动200像素，再把它移回到原来的位置。

接下来，我们给元素应用这个动画。使用animation属性来调用动画，在这里我们使用了四个值，分别是动画的名称，动画的持续时间，动画的缓冲类型和动画的循环次数。在这个例子中，我们将动画设置为无限循环。

最终的效果就是让元素来回移动。你可以根据自己的需要调整动画的参数，如持续时间、缓冲类型等。