css3模拟微信摇一摇

.yao .pic_mobel{

width:100%; height:100%; background:url(../images/yao.png) no-repeat left top; background-size:100%;

transform-origin:center;

-webkit-animation: pic_mobel 2s infinite;

-moz-animation: pic_mobel 2s infinite;

 -o-animation:pic_mobel 2s infinite;
  animation: pic_mobel 2s infinite;  
 -moz-transform-origin:center;
-ms-transform-origin:center;
-o-transform-origin:center;
transform-origin:center;

/*-webkit-transform: rotate(255deg);
-moz-transform: rotate(255deg);
-o-transform: rotate(255deg);
-ms-transform: rotate(255deg);
transform: rotate(255deg);    */
}
@keyframes pic_mobel{    
0%{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);    
    }    
25%{
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
50%{
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-o-transform: rotate(25deg);
-ms-transform: rotate(25deg);
transform: rotate(25deg);    
    }    
100%{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
    }
    }
    
@-moz-keyframes pic_mobel{    
0%{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);    
    }    
25%{
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
50%{
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-o-transform: rotate(25deg);
-ms-transform: rotate(25deg);
transform: rotate(25deg);    
    }    
100%{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
    }

    }
    
@-webkit-keyframes pic_mobel{    
0%{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);    
    }    
25%{
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
50%{
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-o-transform: rotate(25deg);
-ms-transform: rotate(25deg);
transform: rotate(25deg);    
    }    
100%{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
    }
    }
    
@-webkit-keyframes pic_mobel{    
0%{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);    
    }    
25%{
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
50%{
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-o-transform: rotate(25deg);
-ms-transform: rotate(25deg);
transform: rotate(25deg);    
    }    
100%{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
    }
    }