HTML 5 Animation

I need to have a simple graphic animated in an interesting way, in a short amount of time. There is one circle path which has three icons on the path (and associated text around the icon). I would like for the icons to occasionally move around the circle, and when at a certain point on the path, enlarge and pause. When this happens, an area of HTML text next to the graphic (title, paragraph, image button) will change to match the subject of the icon. The user should also be able to roll over the animation (touch on a mobile device) to enlarge a chosen icon, pause the animation and display the appropriate text info. I'm open to what happens after (either the whole effect stays paused until a new icon is selected, or after a point animation returns.) Animation should be smooth, and function correctly in most current browsers. A fall-back of a non-animated version would be helpful, but isn't necessary. I would like this to not be a Flash animation, but instead something usable on an iOS device.