I’ve noticed that there is fragmentation around the animation support in HTML5. I was just wondering whether there has been anything to try and solve this?
For instance this demo here,
http://www.webkit.org/blog-files/3d-transforms/transform-style.html
Specifies transforms specific to webkit. That means it works on Chrome, Android (with the stock browser), iOS (also with the stock browser).
It does not work on IE, Firefox, Opera Mobile, etc.
Also I notice that my Android 2.3.5 does not show the animation correctly on that demo.
Firefox have released their own animations too.
I come from a silverlight background where our applications have quite a lot of animation. I want to move to HTML5, but this could be a problem.
sorry to disappoint but in html5 / css3 everything is still highly in flux. Browsers implement features very early to be “as cool as possible”. to preserve functionality of existing scripts even if the standard changes, they started adding browser-prefixes at some point.
for now you have to use multiple definitions in CSS for animations (among others) and even include some JS fallback for IE9- as IE starts support for translation in IE10 (though there is a workaround with “zoom” in IE9)
Check out CanIUse.com for snapshots of supported features: http://caniuse.com/transforms2d and the hardware-accelerated version http://caniuse.com/transforms3d
also kinda good is this resource: http://www.css3files.com/transform/
if you include the standard-definition after the 5 prefixed definitions newer browsers will use that instead… besides that: when you try using a fancy css feature simply google it togehter with “cross-browser” and you should get links to decent generators that do the hard work for you until you know it by heart.