【AngularJS】$animateでshakeアニメーションを実装する。

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は揺らしたい対象要素。

ディレクティブに逃すと更にイイね。