[分享]css3实现来回移动动画

CSS3是一种能够让我们更加丰富网页样式的技术。其中，可以使用CSS3来实现各种酷炫的动画效果。今天，我们就来介绍一种使用CSS3实现来回移动动画的方法。/ 定义动画关键帧 / keyframes m...

CSS3是一种能够让我们更加丰富网页样式的技术。其中，可以使用CSS3来实现各种酷炫的动画效果。今天，我们就来介绍一种使用CSS3实现来回移动动画的方法。

/* 定义动画关键帧 */
@keyframes move {
  /* 第一帧 */
  0% {
    transform: translateX(0);
  }
  /* 第二帧 */
  50% {
    transform: translateX(200px);
  }
  /* 第三帧 */
  100% {
    transform: translateX(0);
  }
}

/* 使用动画关键帧 */
div {
  animation: move 2s ease-in-out infinite;
} 

上面的代码中，我们定义了一个名为move的动画关键帧，其中包含了三个关键帧，分别是从原点开始移动、移动到x轴正方向200px处、再次回到原点。接着，我们给一个div元素加上了该动画，并设置了2s的时间，同时使用了ease-in-out的动画缓动效果，让动画流畅自然地运动。最后，使用infinite来实现无限循环动画。

这是一个很简单的CSS3动画案例，但可以通过更改关键帧和元素的样式来实现各种不同的效果，如缩放、旋转、倾斜等。希望这篇文章能够帮助大家更好地利用CSS3来创造出更加生动炫酷的网页动画效果。