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