web-dev-qa-db-fra.com

Animation CSS similaire à Mac OS X 10.8 mot de passe non valide "shake"?

Sur l'écran "Mot de passe" de Mac OS X 10.8, si vous entrez un mot de passe invalide, il "tremblera" d'avant en arrière (a.k.a. left et right). J'essaie d'obtenir un effet similaire pour un champ de saisie de mot de passe HTML à l'aide d'animations CSS.

J'ai créé un "Password Shake" jsfiddle qui semble imiter ce comportement. Cependant, cela ne semble pas tout à fait correct. Je ne suis pas sûr que les images clés explicites et la fonction de minutage linear constituent la bonne approche. C’est ma première tentative d’animation CSS, et je cherche des commentaires sur la bonne façon d’y parvenir.

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

Modifier

J'ai trouvé Animate.css qui a une animation secouée. J'ai inclus le code CSS (sans préfixe de navigateur) ci-dessous. Au lieu de définir left, c'est une transform: translateX(), qui a probablement une meilleure chance d'accélération matérielle.

.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;
}
htmlmacoscss3user-interfacecss-animations
23
Kevin Hakanson

J'ai utilisé l'appareil photo de mon iPad pour enregistrer l'écran de mot de passe Mac. On dirait qu'il secoue 3 fois dans chaque direction, les 2 premiers parcourant toute la distance et le dernier une fois une distance inférieure.

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

Je donnerais aussi jRumble un coup aussi, il contient un très grand nombre de shakes et ils peuvent être combinés pour créer toutes sortes de choses folles. Quelques exemples amusants:

0
Lyuben Todorov