css3动画如何让图片播放

CSS3动画是一种非常酷炫的效果，可以让网页中的图片、文字等元素具有生动的动态效果。如果想要让图片播放起来，可以使用CSS3中的animation属性。

img {
  width: 300px;
  height: 200px;
  animation-name: slidein;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes slidein {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0%);
  }
}

上面的代码实现了一种从右侧滑进屏幕的效果。首先设置图片的宽高，接着使用animation-name属性指定播放的动画名称，这里是slidein。animation-duration属性指定动画持续时间为3秒，animation-fill-mode属性表示动画结束后元素停留在最后一帧的状态。

接着，我们使用@keyframes关键字定义动画的关键帧。通过from关键字和to关键字来描述动画的开始和结束状态，这里是图片从右侧滑进到屏幕的过程。

除了这种简单的效果，还可以使用CSS3的其他属性如scale、rotate等来实现更加复杂的动态效果。

img {
  width: 300px;
  height: 200px;
  animation-name: spin;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

上面的代码实现了一种图片不断旋转的效果。animation-timing-function属性指定动画的缓动函数为linear直线变化，animation-iteration-count属性指定动画的播放次数为无限循环。

总之，CSS3动画的运用可以让网页更加生动有趣。通过简单的代码实现，可以让图片在网页中具有更强的吸引力和视觉效果，更好地吸引用户的关注。