[分享]css3怎么让图片抖动

CSS3提供了一种让图片抖动的方法，可以通过keyframes和animation属性实现。

.image-shake{
  animation: shake 0.3s infinite;
}

@keyframes shake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    transform: translate(-10px, 0) rotate(-10deg);
  }
  30% {
    transform: translate(10px, 0) rotate(10deg);
  }
  50% {
    transform: translate(-10px, 0) rotate(-10deg);
  }
  60% {
    transform: translate(10px, 0) rotate(10deg);
  }
  80% {
    transform: translate(-10px, 0) rotate(-10deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
} 

在CSS中定义一个class名为image-shake的元素，并设置animation属性为shake和持续时间为0.3秒，无限重复。

然后在keyframes中定义了从0%到100%的动画效果，把图片往左、右、转动。在20%、50%、80%处把图片往左转动10度，30%、60%处往右转动10度。最后回到0%，使图片回到原位。

这样就可以实现让图片抖动的效果了。