在CSS3翻译动画后获取元素的新位置？

Question

I use a CSS3 translate animation to move an object by say 10px

@-webkit-keyframes move{
  0% {}
100% {
     -webkit-transform: translate(10px);
     }  
}

If initially the object was at left=10px, then it should now be at left=20px. However when I do

document.getElementById("obj").style.left

it returns to me the value 10px even after the animation. How do I get the new value using javascript ? Preferably an answer without jQuery or any other framework :)

Answer 1

The left value is the same, as the element has been translated, not moved with absolute positioning.

As an aside, this is why these are so efficient, as the browser can tell exactly what to repaint, so it can be easily hardware accelerated etc as the translation doesn't affect anything else on the page.

You can examine the transform matrix used internally by using WebKitCSSMatrix and then add it onto the existing offset, but you'll likely find it more straightforward to either examine why you need to do this, or to keep track manually (ie if you started at 10px, then translated by 15px, you are now at 25px.)