[分享]css中实现div移动动画

CSS中有许多可用于实现div移动动画的属性和方法，包括transition、transform、animation等。

div {
  transition: all 1s ease;
}

div:hover {
  transform: translate(50px, 50px);
} 

上面的代码示例使用transition属性和transform方法实现了当鼠标悬停在div元素上时它会向右下方移动50个像素的动画效果。

除了使用transition和transform外，还可以使用animation属性实现更复杂的动画效果。以下是一个例子：

div {
  animation: move 2s ease-in-out infinite;
}

@keyframes move {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(50px, 0px);
  }
  50% {
    transform: translate(50px, 50px);
  }
  75% {
    transform: translate(0px, 50px);
  }
  100% {
    transform: translate(0px, 0px);
  }
} 

上面的代码中使用animation属性和keyframes语法定义了一个名为move的动画，div元素将会在2秒内按照设定的关键帧进行移动。在本例中，div元素会先向右移动50个像素，然后往下移动50个像素，接着向左移动50像素，最后回到初始位置。

通过使用上述CSS属性和方法，我们可以实现各种各样的div移动动画效果，使网页更加生动，吸引人眼球。