网站图片获取焦点hover摇晃摆动

我是设置了只有文章的图片会摆动。

<style>
@-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);}}

.post-content img:hover{
  -webkit-animation: tada 1s .2s ease both;
  -moz-animation: tada 1s .2s ease both;
}
</style>

由于我是先用插件外部测试css,所以多加个</style>标签,如果你放到内部css文件里面去引用去除这个标签的开始和结束就好了。
.post-content img是定位图片所在的位置,说白了就是需要哪里的图片有这个摆动效果。