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は揺らしたい対象要素。
ディレクティブに逃すと更にイイね。