text animation shake

text shakes on hover

HTML

<div class="box">shaking baby!</div>
<div class="box">shaking baby!</div>
<div class="box">shaking baby!</div>

CSS

.box {
    margin: 10px 0px;
    font-weight:bold;
    font-size:1em;
    color:#333;
    display:block;
    height: auto;
    width:120px;
    text-align: center;
    text-shadow: 0px 1px 1px #fff;
}
.box:hover {    
    -webkit-animation: shake 7s ease-in-out 7.1s infinite alternate;
}

@-webkit-keyframes shake {
 from {
    -webkit-transform: rotate(5deg);
 }
 to {
   -webkit-transform-origin:center center;
   -webkit-transform: rotate(-5deg);
 }

}