title: How to shake login form on error
body: <p>I have a login page with HTML and CSS. It's fully functional and all that stuff. However, when login fails I want the login form to shake. How do I make it shake. Right now, it does nothing. </p>
  
  <p>Here is my HTML/CSS/JavaScript. If more code is needed, please tell me. </p>
  
  <p>HTML </p>
  
  <pre><code>&lt;div class="input"&gt;
      &lt;c:if test="${not empty error}"&gt;
          &lt;div class="error"&gt;${error}&lt;/div&gt;
      &lt;/c:if&gt;
      &lt;c:if test="${not empty msg}"&gt;
          &lt;div class="msg"&gt;${msg}&lt;/div&gt;
      &lt;/c:if&gt;
      &lt;div class="email"&gt;
          &lt;input type="text" name="username"
              placeholder="Example@email.com"&gt;&lt;/input&gt;
      &lt;/div&gt;
      &lt;div class="password"&gt;
          &lt;input type="password" name="password" placeholder="*********"&gt;&lt;/input&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;input class="login_btn" type="submit" name="submit" value=""&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.container .login_component .login_wrap .login_wp .input input {
      width: 290px;
      height: 50px;
      padding-left: 20px;
      font-size: 15px;
      border: none;
      background: transparent;
  }
  
  .container .login_component .login_wrap .login_wp .input .email {
      height: 53px;
      margin-top: 20px;
      background:
          url("http://xiilab.mynetgear.com:81/c.hwang/rems/images/login/input.png");
      background-repeat: no-repeat;
      background-position: center center;
  }
  
  .container .login_component .login_wrap .login_wp .input .password {
      height: 53px;
      margin-top: 20px;
      background:
          url("http://xiilab.mynetgear.com:81/c.hwang/rems/images/login/input.png");
      background-repeat: no-repeat;
      background-position: center center;
  }
  
  .container .login_component .login_wrap .login_wp .login_btn {
      height: 55px;
      margin-top: 30px;
      background:
          url("http://xiilab.mynetgear.com:81/c.hwang/rems/images/login/login_btn.png");
      background-repeat: no-repeat;
      background-position: center center;
      border: none;
      width: 310px;
  }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>$('input[type=submit]').on('click', function(e){
        e.preventDefault();
        $('.input').addClass('ahashakeheartache');
  });
  
  $('.input').on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e){
        $('.input').delay(200).removeClass('ahashakeheartache');
  });
  </code></pre>