title: Trigger css3 keyframes using jquery
body: <p>I wrote a keyframe animation:</p>
  
  <pre><code>@-webkit-keyframes cubemove {
  0% {-webkit-transform: translateZ(-194px) rotateY(0deg);}
  20% {-webkit-transform: translateZ(-194px) rotateX(-180deg);}
  40% {-webkit-transform: translateZ(-194px) rotateX(-90deg);}
  60% {-webkit-transform: translateZ(-194px) rotateX(90deg);}
  80% {-webkit-transform: translateZ(-488.5px) rotateY(90deg);}
  90% {-webkit-transform: translateZ(-488.5px) rotateY(-90deg);}
  100% {-webkit-animation-play-state:paused;}
  }
  
  .cubebox {
  -webkit-animation: cubemove 30s ease-in-out 5s 1 normal;
  }
  </code></pre>
  
  <p>I want to run this animation on a rectangle I made using the following html and query code code:</p>
  
  <pre><code>&lt;figure id="box"&gt;
  &lt;img src="/images/cube/step1.jpg"/&gt;
  &lt;img src="/images/cube/step2.jpg"/&gt;
  &lt;img src="/images/cube/step3.jpg"/&gt;
  &lt;img src="/images/cube/step4.jpg"/&gt;
  &lt;img src="/images/cube/step5.jpg"/&gt;
  &lt;img src="/images/cube/step6.jpg"/&gt;
  &lt;/figure&gt;
  
  &lt;button class="commencer"&gt;Start&lt;/button&gt;
  
  &lt;script type="text/javascript"&gt;
  jQuery.noConflict();
  $(document).ready(function(){
      $('.commencer').click(function(){
          $('#box').addClass('cubemove');
      });
  
      $('.commencer').click(function(){
          $(this).removeClass('cubemove');
      });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The thing is that nothing happen when I click on the button. I am not very good with jquery so that might be the problem.</p>
  
  <p>Thank you very much for your help!</p>
  
  <p>Matt</p>