CODEWITHSUNDEEP
javascripthtmlcsscss-animations
eku
eku

Reputation: 3397

Get new position of an element after CSS3 translate animation?

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 :)

Upvotes: 3

Views: 2805

Answers (1)

Rich Bradshaw
Rich Bradshaw

Reputation: 72965

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 (i.e. if you started at 10px, then translated by 15px, you are now at 25px.)

Upvotes: 5

Related Questions