Macのログイン失敗したときのあの動きね。
まずはCSSに下記を定義。
※数値は好みで変更。
@-webkit-keyframes shake {
0% {transform: translateX(0);}
12.5% {transform: translateX(-12px) rotateY(-10deg)}
37.5% {transform: translateX(10px) rotateY(8deg)}
62.5% {transform: translateX(-6px) rotateY(-4deg)}
87.5% {transform: translateX(4px) rotateY(2deg)}
100% {transform: translateX(0)}
}
@keyframes shake {
0% {transform: translateX(0);}
12.5% {transform: translateX(-12px) rotateY(-10deg)}
37.5% {transform: translateX(10px) rotateY(8deg)}
62.5% {transform: translateX(-6px) rotateY(-4deg)}
87.5% {transform: translateX(4px) rotateY(2deg)}
100% {transform: translateX(0)}
}
.shake {
animation: shake 800ms ease-in-out;
-webkit-animation: shake 800ms ease-in-out;
}
んでshakeしたいタイミングでこう。
$animate.addClass(element, 'shake', function() {
$animate.removeClass(element, 'shake');
});
elementは揺らしたい対象要素。
ディレクティブに逃すと更にイイね。