[分享]css3合作向下移动

CSS3中，合作动画是非常实用的一种动画效果，它可以使网页元素更加丰富和生动。其中，合作向下移动效果是一种非常基础而又简单的动画实现方法，下面我们一起来看一看。/ CSS3实现合作向下移动动画 / ....

CSS3中，合作动画是非常实用的一种动画效果，它可以使网页元素更加丰富和生动。其中，合作向下移动效果是一种非常基础而又简单的动画实现方法，下面我们一起来看一看。

/* CSS3实现合作向下移动动画 */
.box{
  /* 元素样式 */
  width: 200px;
  height: 200px;
  background-color: #FA8072;
  /* 设置元素相对定位 */
  position: relative;
  /* 延迟执行动画 */
  animation-delay: 0.3s;
  /* 指定动画执行时间 */
  animation-duration: 2s;
  /* 设置动画执行方式 */
  animation-timing-function: linear;
  /* 执行动画 */
  animation-name: moveDown;
}

@keyframes moveDown {
  0% {
    top: 0;
  }
  100% {
    top: 200px;
  }
} 

在代码中，我们首先设置了一个方块元素.box，并设置了一些基础样式（如背景颜色等），同时我们还将其设置为相对定位，并定义了动画的一些特性（如延迟时间、执行时间、执行方式等）和执行的名称。之后我们使用了@keyframes规则来定义了一个名为moveDown的动画，其中0%表示元素开始时的状态，100%表示元素结束时的状态，我们在这两个状态中对元素的位置进行了定义，即开始时元素的top值为0px，结束时的top值为200px，从而实现了向下移动的效果。

在使用上述代码时，我们只需要在HTML中插入

即可将之应用到元素上，而不需要编写任何JavaScript代码，是一种非常便利和实用的CSS动画实现方式。