[webkit-help] Best way to stop animation and keep position

[Stephen Ferris]

I hope this is the right place to post this, and if not, I hope someone can send me to the right place.

I'm trying to stop an infinitely rotating animation, but when it stops I want it to stop in place, rather than go back to it's starting degrees. I tried using a javascript function to grab the current computed rotation, set the animation name to "none" and then set the rotation to the computed rotation taken just before the animation name was changed, but when I do that there is a slight delay between when it assigns the current computed rotation to a variable, and when it changes the animation name, so the actual last rotation angle that you see is slightly more than what was assigned to the variable, resulting in a skip back when that variable is then used to set the stopped angle. Is there a better way to do this?

You can look at what I'm trying to build here: http://www.steveferrisworld.com/

Ideally I want to have the whole thing start from a stop on load, and then be able to control the speed and direction with one or two levers. All speed changes should ease a certain amount depending on the current speed etc, but I'm having a difficult time making it work right due to the animations defaulting back to their starting positions when I stop them etc, and not being able to change any of their properties on the fly. In Mozilla I'm using javascript to control the entire animation, which was somewhat easier to control, but is obviously pretty jerky on most computers.

Thanks

- Stephen Ferris