(Please note, that since this is about CSS3 animations, this will only work on browsers that support CSS3. At the moment, the two best are Safari and Google Chrome.)

CSS3 animations are fun. They run well, look really nice, and can be hardware accelerated on devices. While they can’t yet accomplish things totally on par with Flash (yet), they are still very functional and worth looking into.

The above CSS code will make whatever you give the class of .moveLeftAnimation move to the right, at a constant speed (linear), during a time of 5 seconds. This will repeat forever.

Now, let’s say you’re tired of that moving thing, and you want it to stop. Not only do you want it to stop, but you want to stop it on the fly. That’s where JavaScript comes in.

Let’s make this nifty JS function:

function toggleAnimation(what){// 'what' is the ID of the element that has the animation class applied to itif(what !=null&& document.getElementById(what)!=null){var elem = document.getElementById(what);if(elem.style.webkitAnimationPlayState=='paused')
elem.style.webkitAnimationPlayState='running';else
elem.style.webkitAnimationPlayState='paused';}}

Beautiful!

There’s only two states to a CSS3 animation: running, and paused. Easy peasy, right?

For the simple way of integrating it in the page, we can put some inline JavaScript on a link to toggle the animation, like so:

<!-- Replace "myAnimatedElementIdHere" with the name of your animated element ;) --><ahref="javascript:toggleAnimation('myAnimatedElementIdHere');">Toggle Animation</a>