How do I re-trigger a WebKit CSS animation via JavaScript?

So, I've got this -webkit-animation rule:

@-webkit-keyframes shake {
    0% {
        left: 0;
    }
    25% {
        left: 12px;
    }
    50% {
        left: 0;
    }
    75% {
        left: -12px;
    }
    100% {
        left:0;
    }
}

And some CSS defining some of the animation rules on my box:

#box{
    -webkit-animation-duration: .02s;
    -webkit-animation-iteration-count: 10;
    -webkit-animation-timing-function: linear;
}

I can shake the #box like this:

document.getElementById("box").style.webkitAnimationName = "shake";

But I can't shake it again later.

This only shakes the box once:

someElem.onclick = function(){
    document.getElementById("box").style.webkitAnimationName = "shake";
}

How can I re-trigger a CSS animation via JavaScript without using timeouts or multiple animations?