css动画实现

<style>

@-webkit-keyframes rocks {

  /* 0%到100%动画 */

  0% {

    transform: rotate(0deg);

  }

  10% {

    transform: rotate(3deg);

  }

  20% {

    transform: rotate(-3deg);

  }

  30% {

    transform: rotate(2deg);

  }

  40% {

    transform: rotate(-2deg);

  }

  50% {

    transform: rotate(1deg);

  }

  60% {

    transform: rotate(-1deg);

  }

  70% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(0deg);

  }

}

</style>

/* 粽子的盒子，所有粽子内部元件都在这里 */

.c_zongzi_box {

  width: 312px;

  height: 305px;

  left: 700px;

  top: 184px;

  position: absolute;

  background: url("../assets/img/zz.png");

}



.c_zongzi_box_rock{

  /* infinite:无限次数 */

  -webkit-animation: rocks 2s infinite;

}

******** 

 <div class="c_zongzi_box c_zongzi_box_rock">

这样就实现了左右摇摆的动画了