css动画移动div代码

CSS动画是Web设计中的一个重要元素，它可以增强网页的视觉效果以吸引用户的注意力。在这篇文章中，我们将学习如何使用CSS动画来移动一个DIV元素。

/* CSS代码开始 */
div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100px;
  height: 100px;
  background-color: #f00;
  animation-name: move;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes move {
  0% {
    top: 50%;
    left: 50%;
  }
  50% {
    top: 10%;
    left: 10%;
  }
  100% {
    top: 50%;
    left: 50%;
  }
}
/* CSS代码结束 */

上述代码中，我们首先定义了一个DIV元素，并使用position属性将其定位在页面中央。随后，我们使用translate属性将其水平和垂直居中。我们还为该DIV设置了宽度、高度和背景色。

接着，我们定义了一个名为“move”的关键帧，该关键帧在DIV元素上应用动画。关键帧中我们定义了三个状态：0%、50%和100%。在0%状态下，DIV元素的位置不发生变化；在50%状态下，DIV元素的位置移动到页面左上角；在100%状态下，DIV元素返回到页面中央。

最后，我们使用animation属性将动画应用于DIV元素，并设置持续时间为2秒，延迟时间为1秒。我们还设置了动画循环次数和方向。

以上就是使用CSS动画移动DIV的代码，通过对动画属性的控制，我们可以实现更多有趣的动画效果，为网页设计增添更多的乐趣。