title: CSS Animations Onclick
body: <p>Using regular JS (not JQuery) I am trying to make some images shake after they are clicked but it is not working.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>    &lt;img id='s1_imgB' class="fragment"... onClick="wrongAnswer()"...
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>    function wrongAnswer(){ 
          document.getElementById("s1_imgB").style.className = "shake";
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>    .shake:hover {....
  </code></pre>
  
  <p>I can get the elements to shake by default using the following html. But, I want to have the CSS animation initiate after the image is clicked.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>    &lt;img id='s1_imgB' class="fragment shake"....
  </code></pre>
  
  <p>When the page loads, the mouse hover affect should be inactive, then after the image is clicked, the mouse hover should cause the image to shake.</p>
  
  <p>What am I doing wrong? Thanks</p>