Swapping out CSS3 animations with rotation using transform-origin

Browser support (3rd June 2011): Safari and Chrome 11 (iPhone and iPad untested).

Please see 3.9. The ‘animation-fill-mode’ Property

Notes: A square turning over on it corner can only be achived by using the same point of 'transform-origin'. Since there are 4 keyframes, 'animation-fill-mode' has been used. There are four buttons in this animation to fire each Keyframe. Each time a button is clicked, it is hidden and the next button in the sequence is revealed. Also the 'animation-name' is not in the CSS but is pulled in via script. This animation is keyboard accessible.