Shake effect CSS

shake.css

/**
shake effect
use any of following classes on the element to shake
*/
.shake {
    -webkit-animation: shake 0.45s;
    -moz-animation: shake 0.45s;
    animation: shake 0.45s;
}
.shake-2 {
    -webkit-animation: shake 0.45s 2;
    -moz-animation: shake 0.45s 2;
    animation: shake 0.45s 2;
}
.shake-3 {
    -webkit-animation: shake 0.45s 3;
    -moz-animation: shake 0.45s 3;
    animation: shake 0.45s 3;
}
.shake-infinite {
    -webkit-animation: shake 0.45s infinite;
    -moz-animation: shake 0.45s infinite;
    animation: shake 0.45s infinite;
}

@-webkit-keyframes shake {
    0%, 40%, 80% { transform: translate(-2px, 0) }
    10%, 50%, 90% { transform: translate(-4px, 0) }
    20%, 60% { transform: translate(2px, 0) }
    30%, 70% { transform: translate(4px, 0) }
    100% { transform: translate(0, 0) }
}
@-moz-keyframes shake {
    0%, 40%, 80% { transform: translate(-2px, 0) }
    10%, 50%, 90% { transform: translate(-4px, 0) }
    20%, 60% { transform: translate(2px, 0) }
    30%, 70% { transform: translate(4px, 0) }
    100% { transform: translate(0, 0) }
}
@keyframes shake {
    0%, 40%, 80% { transform: translate(-2px, 0) }
    10%, 50%, 90% { transform: translate(-4px, 0) }
    20%, 60% { transform: translate(2px, 0) }
    30%, 70% { transform: translate(4px, 0) }
    100% { transform: translate(0, 0) }
}