html - examples - image animation css

¿La animación CSS similar a la contraseña no válida de Mac OS X 10.8 es "sacudir"?

Question

En la pantalla de "contraseña" de Mac OS X 10.8, si ingresa una contraseña no válida, "temblará" de un lado a otro (también conocido como izquierdo y derecho). Estoy tratando de lograr un efecto similar para un campo de entrada de contraseña HTML usando animaciones CSS.

Creé un jsfiddle "Password Shake" que parece emular este comportamiento. Sin embargo, no parece del todo correcto. No estoy seguro de que los fotogramas clave explícitos y la función de temporización linear sean el enfoque correcto. Este es mi primer intento de una animación CSS, y estoy buscando comentarios sobre la manera correcta de lograrlo.

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

Editar

Encontré Animate.css que tiene una animación de movimiento. He incluido el CSS (sin prefijo de navegador) a continuación. En lugar de establecer a la left hace una transform: translateX() , que probablemente tenga una mejor posibilidad de aceleración de hardware.

.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

También le daría una oportunidad a jRumble , tiene un gran número de batidos y se pueden combinar para hacer que todo tipo de cosas locas ocurran. Algunos ejemplos divertidos:

• Batido basado en un porcentaje
• Batido basado en el tiempo

Answer 2

Usé la cámara de mi iPad para grabar la pantalla de palabras clave de Mac. Parece que se sacude 3 veces en cada dirección, con los 2 primeros en toda la distancia y el último 1 en una distancia menor.

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