css3动画图片怎么移动

CSS3动画可以通过使用关键帧（keyframes）来实现图片的移动效果。关键帧是指在动画过程中定义不同时间点的样式变化，通过将这些关键帧组合在一起，就可以创建出流畅的动画效果。

我们需要定义一个动画名称，并使用@keyframes规则来定义关键帧。在关键帧中，我们可以指定不同时间点的样式变化。例如，我们可以在0%和100%的时间点分别指定起始和结束状态的样式。

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

在上面的示例代码中，我们定义了一个名为"move"的动画，它在0%的时间点的transform属性值为translateX(0)，表示初始状态，而在100%的时间点的transform属性值为translateX(100px)，表示结束状态。这样，图片在动画过程中会从左向右移动100像素。

接下来，我们需要将动画应用到图片上。可以使用animation属性来指定动画的名称、持续时间、延迟时间、重复次数等参数。

img {
  animation: move 2s ease-in-out 1s infinite alternate;
}

在上面的示例代码中，我们将动画名称设置为"move"，持续时间为2秒，缓动函数为ease-in-out（表示动画在开始和结束时速度较慢，中间时速度较快），延迟时间为1秒（表示在动画开始之前等待1秒），重复次数为无限循环，且在每次循环结束后反向播放动画（alternate）。

通过以上的代码，图片将会以2秒的持续时间，从左向右移动100像素，并且在移动结束后反向返回，不断循环播放。

需要注意的是，动画效果需要浏览器的支持，不同浏览器可能对某些动画属性的支持程度不同。为了提高兼容性，可以使用浏览器前缀来添加不同浏览器的私有属性。

img {
  -webkit-animation: move 2s ease-in-out 1s infinite alternate;
  animation: move 2s ease-in-out 1s infinite alternate;
}

在上面的示例代码中，我们添加了-webkit-前缀，以支持WebKit内核的浏览器（如Chrome、Safari）。

除了移动效果，CSS3动画还可以实现其他各种效果，如旋转、缩放、淡入淡出等。可以通过在关键帧中定义不同的样式变化来实现这些效果。还可以使用transition属性来实现过渡效果，使元素在状态改变时平滑地过渡。

通过使用CSS3的关键帧动画，我们可以创建出丰富多样的图片移动效果。结合其他CSS3特性，我们可以实现更加复杂和生动的页面动画效果，提升用户体验。