There are many open ways to accomplish animations on web these days:
- Animate on element CSS properties using JS. You can use Jquery animate or its equivalent in those dozens of JS libraries.
- Use CSS3 transitions: they are prettier but they are new and not as ubiquitous as the first option.
- Raphaël.js: Oh good lord. I love this library! It uses SVG animations.
- Canvas! Okay doing this is not as easy as any of others. Where nothing else works, this will.
My problem: I want slow animations. This means that Option 1 and Option 3 cannot be used. For translation, these solutions use positions. Unfortunately, browsers require them to snap the values to nearest integers. This results in jerky movements, especially for cases like mine, I am moving an element 300 pixels in 60 seconds. That’s way to slow for these kind of solutions. Here is an example of the jerky movements.
Well, this leaves me with two choices: CSS3 transitions and Canvas. Both do subpixel animations. Results, I will post as soon as I have some.