CSS-Animation ähnlich wie Mac OS X 10.8 ungültiges Passwort "shake"?

Question

Wenn Sie auf dem Mac OS X 10.8 "Passwort" -Bildschirm ein ungültiges Passwort eingeben, wird es "hin- und hergeschüttelt" (a.k.a links und rechts). Ich versuche, einen ähnlichen Effekt für ein HTML-Passwort Eingabefeld mit CSS-Animationen zu erreichen.

Ich habe eine "Password Shake" jsfiddle erstellt, die dieses Verhalten zu emulieren scheint. Es scheint jedoch nicht ganz richtig zu sein. Ich bin mir nicht sicher, ob die expliziten Keyframes und die Timing-Funktion linear der richtige Ansatz sind. Dies ist mein erster Versuch einer CSS-Animation, und ich bin auf der Suche nach Feedback auf dem richtigen Weg, dies zu erreichen.

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

---

bearbeiten

Ich habe Animate.css finden, die einen Shake Animation hat. Ich habe die CSS-Datei (ohne Browser-Präfix) darunter eingefügt. Anstelle der Einstellung left gibt es eine transform: translateX(), die wahrscheinlich eine bessere Chance für Hardwarebeschleunigung hat. passieren

.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

Früher habe ich meine iPad Kamera den Mac pasword Bildschirm aufzeichnen. Es sieht so aus, als ob es 3 mal jede Richtung schüttelt, wobei die ersten 2 die volle Distanz und die letzte 1 Zeit eine geringere Distanz gehen.

#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

würde ich jRumble einen Schuss geben, hat es eine sehr große Menge von Shakes und sie können kombiniert werden, alle möglichen verrückten Sachen zu machen. Einige Spaß Beispiele:

• Shake based on a percentage
• Time based shake