CSS动画类似于Mac OS X 10.8无效密码“摇动”？

Question

在Mac OS X 10.8“密码”屏幕上，如果输入无效的密码，它将来回“摇动”（也称为左右）。我正在尝试使用CSS动画为HTML密码输入字段实现类似的效果。

我创建了一个似乎模拟此行为的"Password Shake" jsfiddle。但是，这看起来不太正确。我不确定明确的关键帧和定时功能是否正确。这是我第一次尝试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; 
    } 
} 

---

编辑

我发现Animate.css具有抖动动画。我已经在下面包含了（非浏览器前缀）CSS。而不是设置left是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; 
} 

Answer 1

我用我的iPad相机记录了Mac pasword屏幕。它看起来像是每个方向摇动3次，前2次是全距离，最后1次是小距离。

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

Answer 2

我给jRumble一个镜头太，它有一个非常大集奶昔，他们可以结合起来，使疯狂的东西种种发生。一些有趣的例子：

• Shake based on a percentage
• Time based shake