[分享]css中如何设置图片的动画

在CSS中，我们可以为图片添加动画效果，让页面更加生动有趣。下面我们来看一些实现图片动画的方法。

img:hover {
  animation: spin 2s linear infinite;
}

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

上述代码中，我们使用了CSS的动画功能，通过hover事件触发图片旋转的动画。其中的spin是我们定义的动画名称，2s表示动画的时长，linear表示动画的速度线性，infinite表示动画循环播放。而@keyframes就是定义动画的关键帧，它从0度转到360度，从而形成旋转的效果。

img:hover {
  animation: enlargeshrink 0.5s ease-in-out;
}

@keyframes enlargeshrink {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
} 

实现图片的缩放动画也十分简单，我们可以使用CSS的transform属性，通过不同的缩放比例来实现动画的效果。上述代码中，我们通过hover事件触发图片的缩放动画，并使用enlargeshrink作为动画名称，0.5s表示动画的时长，ease-in-out表示动画的速度缓动。而@keyframes中我们定义了动画的三个关键帧，在0%时图片没有发生变化，到50%时图片放大1.2倍，在100%时图片恢复原来的大小。

通过上述示例，我们可以看出，在CSS中实现图片动画是非常简单的，只需要使用animation和@keyframes来定义动画样式，并触发相应的事件即可。希望这篇文章能帮助大家更好地理解CSS中图片动画的实现方法。