tada---动画

第一种方式：tada-动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 25px; top: 400px; width: 500px;}
.item-02{ position: absolute; left: 120px; top: 650px; width: 90px;-webkit-animation: tada 0.5s ease 0s infinite both;}
.item-03{ position: absolute; left: 205px; top: 630px; width: 90px;-webkit-animation: tada 0.5s ease 0s infinite both;}
.item-04{ position: absolute; left: 285px; top: 650px; width: 90px;-webkit-animation: tada 0.5s ease 0s infinite both;}
.item-05{ position: absolute; left: 370px; top: 680px; width: 90px;-webkit-animation: tada 0.5s ease 0s infinite both;}
@-webkit-keyframes tada{
  0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
  10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
  30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
  40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
  100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes tada{
  0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
  10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
  30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
  40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
  100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
.tada{-webkit-animation-name:tada;animation-name:tada}

本地效果为：app/html5_animation/tada.html