CSS-анимация похожа на Mac OS X 10.8 неверный пароль "встряхнуть"?

На Mac OS X 10.8 "пароль", если вы введете неверный пароль, он "встряхнет" назад и вперед (a.k.a. влево и вправо). Я пытаюсь добиться аналогичного эффекта для поля ввода пароля HTML, используя анимацию CSS.

Я создал "Shake пароля" jsfiddle, который, похоже, подражает этому поведению. Однако это не совсем правильно. Я не уверен, что явные ключевые кадры и функция времени linear являются правильным подходом. Это моя первая попытка анимации CSS, и я ищу обратную связь по правильному пути для достижения этой цели.

HTML

<div class="box">
    <input type="password" id="demo-password" placeholder="password" autofocus />
</div>

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 and -moz-animation */
    -webkit-animation: shake .6s linear;
}
/* also need keyframes and -moz-keyframes */
 @-webkit-keyframes shake {
    0% {
        left:-10px;
    }
    16% {
        left:9px;
    }
    33% {
        left:-6px;
    }
    50% {
        left:5px;
    }
    66% {
        left:-2px;
    }
    83% {
        left:1px;
    }
    100% {
        left: 0px;
    }
}

---

Edit

Я нашел Animate.css, у которого есть анимация встряхивания. Я включил нижеприведенный CSS-код (без браузера). Вместо установки left есть a transform: translateX(), который, скорее всего, имеет больше шансов на аппаратное ускорение.

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes shake {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
    20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.shake {
    animation-name: shake;
}