css3 图片 抖动效果

标签：抖动   ase   图片   css   pre   animation   scale   hover   :hover   

@-moz-keyframes tada{
    0%{-moz-transform:scale(1);}
    10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}
    30%,50%,70%,90%{-moz-transform:scale(1.2) rotate(3deg);}
    40%,60%,80%{-moz-transform:scale(1.2) rotate(-3deg);}
    100%{-moz-transform:scale(1) rotate(0);}
   }

  @-webkit-keyframes tada{
    0%{-webkit-transform:scale(1);}
    10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
    30%,50%,70%,90%{-webkit-transform:scale(1.2) rotate(3deg);}
    40%,60%,80%{-webkit-transform:scale(1.2) rotate(-3deg);}
    100%{-webkit-transform:scale(1) rotate(0);}}

.doudun:hover{
  -webkit-animation: tada 1s .2s ease both;
  -moz-animation: tada 1s .2s ease both;
}

css3 图片 抖动效果

标签：抖动   ase   图片   css   pre   animation   scale   hover   :hover   

原文地址：http://www.cnblogs.com/xiaoliu12/p/6382175.html