gumgaFilterShake.js

const id = 'gumga-filter';
let elm = document.querySelector('#' + id);
document.addEventListener('click', (e) => {
  let isElement = 0;
  angular.forEach(e.path, (node) => {
    if (node.nodeName == id.toUpperCase()) isElement++
  });
  if (!isElement) {
    if (!isValidQuery()) {
      elm.classList.add('shake');
      setTimeout(function () {
        elm.classList.remove('shake');
      }, 1000);
    } else {
      scope.addQuery(scope.query);
    }
  }
});

shake.css

.shake {
	animation: shake 1s cubic-bezier(.36,.07,.19,.97) both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}

@keyframes shake {
	10%, 90% {
		transform: translate3d(-1px, 0, 0);
	}

	20%, 80% {
		transform: translate3d(2px, 0, 0);
	}

	30%, 50%, 70% {
		transform: translate3d(-4px, 0, 0);
	}

	40%, 60% {
		transform: translate3d(4px, 0, 0);
	}
}