title: How to activate a CSS3 (webkit) animation using javascript?
body: <p>Im really stuck. I want a CSS animation I have created (below) to activate on clicking a div. The only way I thought I could do that was using javascript to create an onClick event. However I dont know how to run/refrence the animation that is in my css file. Can anyone help me?</p>
  
  <p>This is the animation in my css file that I want to run by clicking on a div.</p>
  
  <pre><code>@-webkit-keyframes colorchange {
   0% {
     background-color: red;
     opacity: 1.0;
     -webkit-transform: scale(1.0) rotate(0deg);
   }
   33% {
     background-color: blue;
     opacity: 0.75;
     -webkit-transform: scale(1.1) rotate(-5deg);
   }
   67% {
     background-color: green;
     opacity: 0.5;
     -webkit-transform: scale(1.1) rotate(5deg);
   }
   100% {
     background-color: red;
     opacity: 1.0;
     -webkit-transform: scale(1.0) rotate(0deg);
   }
  }
  </code></pre>
  
  <p>I even tried putting the css in the same file as the javascript (index.html) and used the following code to try and activate it on click, but no luck.</p>
  
  <pre><code>&lt;script&gt;
  function colorchange( test )
  {
  test.style.webkitAnimationName = 'colorchange ';
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Please help :)</p>