JavaScript Div 'Bounce'/'Jiggle'

Question

Observé este efecto tanto en el servicio me.com de Apple (la página de inicio de sesión, si su usuario/pase es incorrecto que produce el efecto que intento replicar) como dentro Inicio de sesión de WordPress

Es básicamente una implementación de JavaScript del efecto cuando escribe el nombre de usuario y contraseña incorrectos en una Mac.

¿Alguien sabe si algo así se ha implementado de código abierto o mediante un plugin jQuery?

Answer 1

Puede usar el jQuery UI 'shake' effect.

Ejemplo: http://jsbin.com/alozu4

$('#theElement').effect('shake', 100); 

Answer 2

Aún mejor: Sin Javascript, pero solamente CSS 3:

http://jsfiddle.net/fluidblue/dyc96/

@-webkit-keyframes wiggle 
{ 
    0% {-webkit-transform: rotateZ(2deg);} 
    50% {-webkit-transform: rotateZ(-2deg);} 
    100% {-webkit-transform: rotateZ(2deg);} 
} 
@-moz-keyframes wiggle 
{ 
    0% {-moz-transform: rotateZ(2deg);} 
    50% {-moz-transform: rotateZ(-2deg);} 
    100% {-moz-transform: rotateZ(2deg);} 
} 
@-o-keyframes wiggle 
{ 
    0% {-o-transform: rotateZ(2deg);} 
    50% {-o-transform: rotateZ(-2deg);} 
    100% {-o-transform: rotateZ(2deg);} 
} 
@keyframes wiggle 
{ 
    0% {transform: rotateZ(2deg);} 
    50% {transform: rotateZ(-2deg);} 
    100% {transform: rotateZ(2deg);} 
} 

.test { 
    -webkit-animation: wiggle 0.2s ease infinite; 
    -moz-animation: wiggle 0.2s ease infinite; 
    -o-animation: wiggle 0.2s ease infinite; 
    animation: wiggle 0.2s ease infinite; 
} 

prueba con

<div class="test" style="background-color: red;">Test</div>