CSS animation similar to Mac OS X 10.8 invalid password "shake"?

Question

On the Mac OS X 10.8 "password" screen, if you enter an invalid password, it will "shake" back and forth (a.k.a. left and right). I am trying to achieve an similar effect for an HTML password input field using CSS animations.

I created a "Password Shake" jsfiddle that seems to emulate this behavior. However, it doesn't seem quite right. I'm not sure the explicit keyframes and the linear timing function are the right approach. This is my first attempt at a CSS animation, and I'm looking for feedback on the right way to achieve this.

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

---

Edit

I did find Animate.css which has a shake animation. I've included the (non browser prefixed) CSS below. Instead of setting left is does a transform: translateX(), which likely has a better chance for hardware acceleration.

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

Lasky

i don't know if it is exactly right but it looks good. – Granulation

JQuery UI offers what you are looking for. You may benefit from looking at their code. – Lonilonier

Answer 1

I used my iPad camera to record the Mac pasword screen. It looks like it shakes 3 times each direction, with the first 2 going the full distance and the last 1 time a lesser distance.

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

Lasky

Works like a charm man, thank you. I simply adjusted the pixel transitions to 7px and 4px and speeded it up 100ms to fit my needs. – Antoniaantonie

Answer 2

I'd give jRumble a shot too, it has a very large set of shakes and they can be combined to make all sorts of crazy stuff happen. Some fun examples:

• Shake based on a percentage
• Time based shake

Doretha

Answer 3

I thought the original poster's shake animation looked the most natural and fluid compared to all that were posted here. So here it is using transform instead of positionals:

0% {
    transform: translateX(-10px);
}
16% {
    transform: translateX(9px);
}
33% {
    transform: translateX(-6px);
}
50% {
    transform: translateX(5px);
}
66% {
    transform: translateX(-2px);
}
83% {
    transform: translateX(1px);
}
100% {
    transform: translateX(0);
}

Corcyra