[分享]css3匀速移动div位置

CSS3是当前前端开发中不可缺少的重要技术，在其中，也有许多关于移动和动画方面的功能非常实用，其中就包括了匀速移动div位置的功能。在下面的代码中，我们将会详细介绍这个功能的实现方法。/定义一个div...

CSS3是当前前端开发中不可缺少的重要技术，在其中，也有许多关于移动和动画方面的功能非常实用，其中就包括了匀速移动div位置的功能。在下面的代码中，我们将会详细介绍这个功能的实现方法。

/*定义一个div，设置好它的初始位置和样式*/
div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}

/*定义一个动画规则，使用translate函数来实现匀速移动*/
@keyframes move {
  from {
    transform: translate(0, 0); /*起始位置*/
  }
  to {
    transform: translate(300px, 0); /*终止位置*/
  }
}

/*使用动画规则实现匀速移动*/
div {
  animation: move 3s linear infinite; /*3s的移动时间，使用“linear”关键字来实现匀速移动，无限循环*/
} 

以上就是使用CSS3实现匀速移动div位置的方法，使用translate函数对元素进行移动，通过定义一个动画规则，将元素从起始位置移动到终止位置，实现整个动画过程的演示。如需控制移动的速度，可以通过使用不同的时间函数来达到不同的效果。