[分享]css3动画循环上下移动

在CSS3中，我们可以通过使用animation和keyframes来创建各种各样的动画效果。其中，循环上下移动的动画效果是一种非常普遍且实用的效果。下面，我们来具体解析如何实现这样一种动画效果。/ ...

在CSS3中，我们可以通过使用animation和@keyframes来创建各种各样的动画效果。其中，循环上下移动的动画效果是一种非常普遍且实用的效果。下面，我们来具体解析如何实现这样一种动画效果。

/* 首先，我们需要为元素设置初始属性 */
.move {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: red;
}

/* 然后，我们使用animation属性来定义动画效果 */
.move {
  animation: move 2s infinite;
}

/* 定义动画关键帧 */
@keyframes move {
  0% {
    top: 0;
  }
  50% {
    top: 200px;
  }
  100% {
    top: 0;
  }
} 

上面的代码中，我们首先为元素设置了必要的初始属性，包括位置、大小和背景色等等。然后，我们使用animation属性来定义动画效果，其中，move表示动画名称，2s表示每次动画持续2秒，infinite表示动画无限循环播放。

接着，我们使用@keyframes来定义动画关键帧。在这里，我们定义了三个关键帧，分别对应动画进行的时刻。0%表示动画开始时的状态，50%表示动画进行到一半时的状态，100%表示动画结束时的状态。在我们的动画效果中，我们通过改变元素的top值来实现上下移动的效果。

最后，我们将定义好的动画效果应用到元素上，即可实现动画循环上下移动的效果。