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 for an HTML password input field using CSS animations. I created a "Password Shake" jsfiddle that seems to emulate this behavior. However, it doesn't seem quite right. I'm not sure the explicit keyframes and the `linear` timing function are the right approach. This is my first attempt at a CSS animation, and I'm looking for feedback on the right way to achieve this. HTML ```

``` JavaScript ``` $('#demo-password').on('keyup', function (e) { var $input = $(this); var val = $.trim($input.val()); $input.removeClass("invalid"); if (e.which !== 13 || !val) { return; } if (val != "password") { $input.select(); $input.addClass("invalid"); } }); ``` CSS ``` #demo-password.invalid { outline-color: red; /* also need animation…

Accepted Answer

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);
    }
}
```

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

Solution

Problem