css3中如何使图片动画

实现图片动画效果可以使用CSS3中的动画属性，通过设置不同的关键帧实现图片在运动过程中的动态效果。

/* 定义动画 */
@keyframes move {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(50%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* 应用动画 */
img {
  animation: move 2s ease-in-out infinite;
}

上面的CSS代码中，通过@keyframes关键字定义名为“move”的动画。动画分为三个关键帧，分别是0%、50%和100%。我们使用transform属性来实现图片在水平方向上的位移操作，从左侧移到右侧。在应用动画时，我们通过animation属性来指定使用move动画，设置动画持续时间为2秒，使用ease-in-out缓动函数，并且将动画无限循环。这样就可以让图片一直在运动。

除了位移操作外，我们还可以使用其他CSS3属性来实现图片的旋转、缩放等动画效果。例如：

/* 定义动画 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* 应用动画 */
img {
  animation: rotate 2s linear infinite;
}

以上代码中，我们定义了名为“rotate”的动画，将图片沿着中心点旋转360度。这里使用了rotate函数来实现旋转，同样设置了动画持续时间为2秒，使用线性缓动函数，并且将动画无限循环。这样就可以让图片无限旋转。