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

so, i've got -webkit-animation rule:

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

and css defining of animation rules on box:

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

i can shake #box this:

document.getelementbyid("box").style.webkitanimationname = "shake"; 

but can't shake again later.

this shakes box once:

someelem.onclick = function(){     document.getelementbyid("box").style.webkitanimationname = "shake"; } 

how can re-trigger css animation via javascript without using timeouts or multiple animations?

i found answer based on source code , examples @ css3 transition tests github page.

basically, css animations have animationend event fired when animation completes.

for webkit browsers event named “webkitanimationend”. so, in order reset animation after has been called need add event-listener element animationend event.

in plain vanilla javascript:

var element = document.getelementbyid('box');  element.addeventlistener('webkitanimationend', function(){     this.style.webkitanimationname = ''; }, false);  document.getelementbyid('button').onclick = function(){     element.style.webkitanimationname = 'shake';     // you'll want preventdefault here. }; 

and jquery:

var $element = $('#box').bind('webkitanimationend', function(){     this.style.webkitanimationname = ''; });  $('#button').click(function(){     $element.css('webkitanimationname', 'shake');     // you'll want preventdefault here. }); 

---

the source code css3 transition tests (mentioned above) has following support object may helpful cross-browser css transitions, transforms, , animations.

here support code (re-formatted):

var css3animationsupport = (function(){     var div = document.createelement('div'),         divstyle = div.style,         // you'll better off using `switch` instead of theses ternary ops         support = {             transition:                 divstyle.moztransition     === ''? {name: 'moztransition'   , end: 'transitionend'} :                 // ms add prefix transitionend event?                 (divstyle.mstransition     === ''? {name: 'mstransition'    , end: 'mstransitionend'} :                 (divstyle.webkittransition === ''? {name: 'webkittransition', end: 'webkittransitionend'} :                 (divstyle.otransition      === ''? {name: 'otransition'     , end: 'otransitionend'} :                 (divstyle.transition       === ''? {name: 'transition'      , end: 'transitionend'} :                 false)))),             transform:                 divstyle.moztransform     === '' ? 'moztransform'    :                 (divstyle.mstransform     === '' ? 'mstransform'     :                 (divstyle.webkittransform === '' ? 'webkittransform' :                  (divstyle.otransform      === '' ? 'otransform'      :                 (divstyle.transform       === '' ? 'transform'       :                 false))))             //, animation: ...         };     support.transformprop = support.transform.name.replace(/([a-z])/g, '-$1').tolowercase();     return support; }()); 

i have not added code detect “animation” properties each browser. i’ve made answer “community wiki” , leave you. :-)