Question

I’m trying to animate a canvas on three different layers on the onmousedown and ontouchstart. The three canvas go from left to right at a different speed to give a perspective effect as long as the onmouseup or ontouchend are not fired.

I am using @-webkit-keyframes css to do my animations:

@-webkit-keyframes aCarsRight
{
from{background-position: 0px 0px;}
to{background-position: 640px 0px;}
}

.cars_move_right
{
-webkit-animation-name: aCarsRight;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
-webkit-transition-timing-function: linear;
}

What I would like to do is get the current background-position of the three layers prior to disabling the pan animation and set them manually so when I remove the .cars_move_right class from my div is stays in the same position instead of rolling back to its default position.

Is there a way to get the background-position or just a work around to get what I want? The page is meant for iPhone and iPod Touch.

Thanks !

---

I found something interesting. Instead of grabbing the background-position, stop the animation and set the background-position to my divs, I pause the animation.

document.getElementById('global').style.webkitAnimationPlayState = 'paused';
document.getElementById('global_cars').style.webkitAnimationPlayState = 'paused';
document.getElementById('global_car').style.webkitAnimationPlayState = 'paused';

Haven’t had the chance to test it on iPhone yet.

---

And, here’s a method that seems to work cross-browswers to get any property:
window.getComputedStyle(document.getElementById(‘div’))[‘background-position’];

Answer 1

I found that I can use this to get the property I couldn’t get with [mydiv].style.[property]

function getProperty(property, div)
{
    return window.getComputedStyle(document.getElementById(div))[property];
}