title: How do I re-trigger a WebKit CSS animation via JavaScript?
body: <p>So, I've got this <code>-webkit-animation</code> rule:</p>
  
  <pre><code>@-webkit-keyframes shake {
      0% {
          left: 0;
      }
      25% {
          left: 12px;
      }
      50% {
          left: 0;
      }
      75% {
          left: -12px;
      }
      100% {
          left:0;
      }
  }
  </code></pre>
  
  <p>And some CSS defining some of the animation rules on my <code>box</code>:</p>
  
  <pre><code>#box{
      -webkit-animation-duration: .02s;
      -webkit-animation-iteration-count: 10;
      -webkit-animation-timing-function: linear;
  }
  </code></pre>
  
  <p>I can <code>shake</code> the <code>#box</code> like this:</p>
  
  <pre><code>document.getElementById("box").style.webkitAnimationName = "shake";
  </code></pre>
  
  <p>But I can't shake it again later.</p>
  
  <p>This only shakes the box once:</p>
  
  <pre><code>someElem.onclick = function(){
      document.getElementById("box").style.webkitAnimationName = "shake";
  }
  </code></pre>
  
  <p>How can I re-trigger a CSS animation via JavaScript without using timeouts or multiple animations?</p>