[分享]css3摇摆动画

CSS3摇摆动画是一种非常流行的动画效果，它可以使元素来回摇摆，非常吸引眼球。这种动画效果可以使用CSS3的keyframes规则来实现，下面我们就来学习一下如何实现CSS3摇摆动画。/ 定义动画关键...

CSS3摇摆动画是一种非常流行的动画效果，它可以使元素来回摇摆，非常吸引眼球。这种动画效果可以使用CSS3的@keyframes规则来实现，下面我们就来学习一下如何实现CSS3摇摆动画。

/* 定义动画关键帧 */
@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}

/* 应用动画 */
.element {
  animation: swing 1s ease-in-out infinite;
} 

首先，我们定义了一个名为"swing"的动画关键帧，它包含了三个关键帧，分别为0%、50%和100%。在0%位置，元素不进行旋转；在50%位置，元素向右旋转15度；在100%位置，元素向左旋转15度。

接下来，我们将"swing"动画应用到元素中，使用animation属性，指定动画名称为"swing"，动画持续时间为1秒，动画运动轨迹为ease-in-out，同时我们还指定了动画循环播放，即infinite。

通过上面的代码，我们就可以轻松的实现CSS3摇摆动画效果了。需要注意的是，为了兼容不同的浏览器，我们需要添加不同的浏览器前缀。