Hi,
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'];