JavaScript Div 'Bounce' / 'Jiggle'

Question

I noticed this effect both in the Apple me.com service (the login page, if your user / pass is wrong, it affects the effect I'm trying to reproduce), and the login to WordPress.

This is basically an implementation of the JavaScript effect when you enter the wrong username and password on a Mac.

Does anyone know if something like this was implemented with open source or via the jQuery plugin?

Answer 1

You can use jQuery UI 'shake' effect .

Example: http://jsbin.com/alozu4

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

Answer 2

: Javascript, CSS3:

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

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