Get current time of a running CSS3 animation

I am trying to get the current time of a running animation but I did not find anything. I can get the start time:

myelement.addEventListener('webkitAnimationStart', function (evt){ 
  console.log(evt.elapsedTime)                                   
});

and end time:

myelement.addEventListener('webkitAnimationEnd', function (evt){ 
  console.log(evt.elapsedTime)                                   
})

However I think that this is lame since those values are easy to get from the CSS. Any ideas?

Answer

CSS Animations have very limited state hooks. They do not report their current time (although you can get the currently applied transformation matrix by using window.getComputedStyle()).

You get a start and an end event – that’s it. If you need to get current time, then use JavaScript.