[分享]css3摇晃抖动怎么回事

CSS3是CSS的高级版本，它为Web设计师提供了更多的样式和效果。其中，摇晃抖动是CSS3中提供的一种动画效果，非常有趣和实用。CSS3摇晃抖动的原理很简单，它通过CSS的帧动画来实现，就是不断地变...

CSS3是CSS的高级版本，它为Web设计师提供了更多的样式和效果。其中，摇晃抖动是CSS3中提供的一种动画效果，非常有趣和实用。

CSS3摇晃抖动的原理很简单，它通过CSS的帧动画来实现，就是不断地变化元素的属性，从而达到动画的效果。

/* 定义一个keyframes */
@keyframes shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-10px, 0) rotate(-5deg); }
  20% { transform: translate(10px, 0) rotate(5deg); }
  30% { transform: translate(-10px, 0) rotate(-5deg); }
  40% { transform: translate(10px, 0) rotate(5deg); }
  50% { transform: translate(-10px, 0) rotate(-5deg); }
  60% { transform: translate(10px, 0) rotate(5deg); }
  70% { transform: translate(-10px, 0) rotate(-5deg); }
  80% { transform: translate(10px, 0) rotate(5deg); }
  90% { transform: translate(-10px, 0) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* 应用keyframes */
.element {
  animation: shake 0.8s;
  animation-iteration-count: infinite;
} 

以上是摇晃抖动的CSS代码，其中keyframes定义了一段动画，shake是它的名称，里面定义了元素的10个状态，从0%到100%，而其中的transform属性则说明了元素应该如何变化。上面的样式会让元素每0.8秒执行一次这个动画，不断摇晃抖动。

同时，我们可以通过animation-iteration-count属性指定动画的重复次数，上面的代码会让元素无限循环地进行摇晃抖动动画。如果你想让元素执行一次抖动，可以将它的值设置为1。

总体上来说，CSS3的摇晃抖动是一个有趣同时非常实用的动画效果，它可以帮助你为Web页面增添更多的生动和活泼。