CSS3 animations, buttons shake

Today want to share a set of codes, when the mouse hovers over the button. Button shake! ! !

<! DOCTYPE HTML > 
< HTML lang = "EN" > 
< head > 
    < Meta charset = "UTF-. 8" > 
    < title > mouse hovers over the button, jitter </ title > 
</ head > 
< style > 
       . lanren { 
                 margin : 200px Auto ; 
                 width : 300px by ; 
                 text-align = left : Center ; 
                 height : 40px;
                 line-height: 40px;
                 border: 1px solid #CCC;
                 border-radius: 2px;
                 background-color: skyblue;
        }
        .lanren:hover {
                         animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
        }

         @keyframes shake {
                           10%, 90% {transform: translate3d(-1px, 0, 0);}
     
                           20%, 80% {Transform : translate3d (2px, 0, 0) ; } 
                           
                           30%, 50%, 70% { Transform : translate3d (-4px, 0, 0) ; } 
   
                           40%, 60% { Transform : translate3d (4px, 0, 0) ; } 
 } 
 </ style > 

< body > 
    < div class = "lanren" > dare hovering on top of me, I will shake! ! </ Div > 
</ body > 
</ HTML >

 

Renderings (static screenshot):

 

 

Want to see concrete action figure, it sounded hands Come on, rendering very cute drop Yo! ! !