Hi I would like to know how to get the current TranslateX of a css3 animation.

I have this animation:

@-webkit-keyframes pictureTransition {
    from,5% {-webkit-transform:translateX(0px);}
    10%,25% {-webkit-transform:translateX(-1024px);}
    30%,45% {-webkit-transform:translateX(-2048px);}
    50%,65% {-webkit-transform:translateX(-3072px);}
    70%,85% {-webkit-transform:translateX(-4096px);}
    90%,to {-webkit-transform:translateX(-5120px);}
}

and I have a button that when clicked, will get the current translateX in the animation and save it in a variable for further use. Any ideas?

Hi I would like to know how to get the current TranslateX of a css3 animation.

I have this animation:

@-webkit-keyframes pictureTransition {
    from,5% {-webkit-transform:translateX(0px);}
    10%,25% {-webkit-transform:translateX(-1024px);}
    30%,45% {-webkit-transform:translateX(-2048px);}
    50%,65% {-webkit-transform:translateX(-3072px);}
    70%,85% {-webkit-transform:translateX(-4096px);}
    90%,to {-webkit-transform:translateX(-5120px);}
}

and I have a button that when clicked, will get the current translateX in the animation and save it in a variable for further use. Any ideas?

• javascript
• html
• css

2 Answers 2

Here is how I would do it: http://jsfiddle/joshnh/dCSBU/

Code used from: Get the value of -webkit-transform of an element with jquery

You should be able to get the current translateX value with this:

var transformX = new WebKitCSSMatrix(window.getComputedStyle([YOUR ELEMENT HERE]).webkitTransform).m42;

This way you don't have to split the string and all that jazz... m42 is the matrix value for X, m41 is the matrix value for Y

See this link for more info.