CSS Rumble

Rumble animation similar to jRumble done in CSS3

HTML

<h1 class="rumble">Always Rumblin'</h1>
<h1 class="rumble-hover">Hover for Rumble</h1>
<h1 class="rumble-active">Press for Rumble</h1>

CSS

@-webkit-keyframes rumble {
    0% {-webkit-transform: rotate(0deg);}
    25% {-webkit-transform: translate(2px, 0px) rotate(-3deg);}
    50% {-webkit-transform: translate(0px, -2px) rotate(0deg);}
    75% {-webkit-transform: translate(-2px, 0px) rotate(3deg);}
    100% {-webkit-transform: translate(0px, 2px) rotate(0deg);} 
}

rumble, .rumble-hover:hover, .rumble-active:active {
    -webkit-animation: rumble .0625s infinite linear;
}

h1{
    background-color: lightBlue;
    font-size: 18px;
    width: 150px;
    margin: 0 0 18px;
}