title: Shake image on hover with css?
body: <p>I am trying to make image shake <code>on hover</code> with CSS3 but seems like I have syntax error. I am trying the apply the effect to css3.png and html5.png
  I have added id classes to the images that I would like to have that effect.</p>
  
  <p>Here is my current html:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-lg-2 col-lg-offset-2"&gt;
          &lt;div id="img"&gt;
              &lt;img class="img-responsive shake" src="img/html5.png"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-3"&gt;
          &lt;img class="img-responsive" src="img/and.png"&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-2"&gt;
          &lt;div id="img"&gt;
              &lt;img class="img-responsive shake" src="img/css3.png"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here is the CSS:</p>
  
  <pre><code>.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
  }
  
  @-webkit-keyframes shake {
    from, to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    10%, 30%, 50%, 70%, 90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }
  
    20%, 40%, 60%, 80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }
  
  @keyframes shake {
    from, to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    10%, 30%, 50%, 70%, 90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }
  
    20%, 40%, 60%, 80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }
  </code></pre>