css上下移动的动画

在网页设计中，动画效果对于视觉呈现和用户交互起到非常重要的作用。今天，我们来学习如何使用CSS实现简单的上下移动动画。

/* CSS代码 */
.move {
  position: relative;
  animation: moveUpDown 2s ease-in-out infinite;
}

@keyframes moveUpDown {
  50% {
    top: -10px;
  }
} 

首先，我们需要给要移动的元素添加position: relative属性，为动画效果提供定位的参照点。

接着，我们使用CSS3的animation属性来制作上下移动的动画。其中， moveUpDown是动画名称， 2s是动画的时长， ease-in-out是动画的速度曲线，表示在开始和结束时速度较慢，在中间时速度比较快，infinite表示动画无限循环。

然后，在@keyframes规则中，我们定义动画从0%到50%的过程中，top属性从0px到-10px不断变化，从而实现了上下移动的效果。

最后，我们将class为move的元素应用到需要添加动画的元素上即可。这样，我们就成功地实现了一个简单的上下移动动画。