CSS animation similar to Mac OS X 10.8 invalid password “shake”?

Question

On the Mac OS X 10.8 \"password\" screen, if you enter an invalid password, it will \"shake\" back and forth (a.k.a. left and right). I am trying to achieve an similar effect f

Answer 1

I used my iPad camera to record the Mac pasword screen. It looks like it shakes 3 times each direction, with the first 2 going the full distance and the last 1 time a lesser distance.

#demo-password.invalid {
    outline-color: red;
    /* also need animation and -moz-animation */
    -webkit-animation: shake .5s linear;
}
/* also need keyframes and -moz-keyframes */
 @-webkit-keyframes shake {
    8%, 41% {
        -webkit-transform: translateX(-10px);
    }
    25%, 58% {
        -webkit-transform: translateX(10px);
    }
    75% {
        -webkit-transform: translateX(-5px);
    }
    92% {
        -webkit-transform: translateX(5px);
    }
    0%, 100% {
        -webkit-transform: translateX(0);
    }
}