[分享]css3摇一摇动画

CSS3是一种强大的技术语言，它可以实现许多令人惊奇的动画效果。这里，我们将讨论如何利用CSS3实现“摇一摇”动画。 /首先，我们需要定义一个.keyframes规则。/ keyframes shak...

CSS3是一种强大的技术语言，它可以实现许多令人惊奇的动画效果。这里，我们将讨论如何利用CSS3实现“摇一摇”动画。

/*首先，我们需要定义一个.keyframes规则。*/

@keyframes shake {
  0% { transform: translate(0, 0) rotate(0); }
  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(0); }
}

/*在我们想要使用动画的元素上应用该规则。*/

.shake {
  animation-name: shake;
  animation-duration: 1s;
  animation-iteration-count: infinite; /*使动画无限次播放。*/
}

/*我们还可以在需要的情况下定义其他属性，例如边框或颜色。*/

.shake {
  border: 1px solid #333;
  color: #333;
} 

注意，上述代码示例将元素抖动往左边（以及向右边）10px。为了使元素抖动往不同的方向，只需更改这些值即可。同样，您可以更改元素旋转的度数，以达到所需效果。