css动画连续左右晃动

在网页设计中，CSS动画已成为制作网页特效的重要工具，其具有简洁、流畅，易于实现等特点，特别适合制作简单的动效。

本文将介绍如何使用CSS动画实现一个连续左右晃动的效果。首先，我们需要在HTML标签中添加需要应用的目标元素，例如一个div元素：

<div class="shake"></div>

接下来，我们需要在CSS样式表中为此元素声明样式，并定义动画。

.shake {
  width: 100px;
  height: 100px;
  background-color: #337ab7;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  animation: shake 0.5s infinite alternate;
}

@keyframes shake {
  to {
    transform: translateX(10px);
  }
  from {
    transform: translateX(-10px);
  }
}

上述CSS代码中，首先为目标元素指定了基本样式，在position属性中设置元素显示的位置，以及使用translate属性对元素进行微调。然后，在animation属性中设置动画名称为shake，播放时间为0.5秒，重复次数为一直执行，并使用alternate属性来让动画交替执行正向和反向的变化。

使用@keyframes关键字可以定义一个名为shake的CSS动画，其中通过from关键字定义动画起始状态，将元素向左移动10像素，再使用to关键字定义动画结束状态，将元素向右移动10像素。

效果如下：

通过这种方式，我们可以在网页上应用CSS动画，制作出生动有趣的网页特效。这对于提高用户体验、增加网页的交互性都具有重要意义。