View Full Version : HTML Animation Problem

08-15-2012, 06:07 PM
Hi guys,

I have an issue. I made this website http://www.tom-paulson.com/ and for some reason on other's browsers the animations do not work. They work fine on mine so I am really not sure what's wrong and how to fix. Can anyone help??

08-15-2012, 06:38 PM
Hi datura, can you be a little more specific on what does not work, and which browsers/scenarios it does not work? devils in the details.

08-15-2012, 06:58 PM
Hi, it seems its just an older browser compatibility issue, since html animations are a somewhat new invention. I just need to figure out a fallback state or something. Thanks for your reply, I think I know what to do now.

08-16-2012, 08:49 AM
You can either use JavaScript (jQuery) as fallback solution to recreate the animations or make just a static fallback solution... just the image without the animations.

In both case you need some kind of feature detection script like http://modernizr.com/ so that you only load the fallback solution for the browsers that don't support CSS3 animations natively.

I've also noticed that the animations on the page really sucks CPU and this is because you have this really slow animation. Another thing... it took really a while to load the animation image which blocked everything else to load, so it is all really sluggish.

I see that it is created in Adobe Edge which I personally don't use to create CSS3 @keyframe animations, so I'm not sure how you will have to combine Modernizr with Adobe Edge.
I thought that Adobe Edge also use some kind of feature detection that looks first if a browser supports CSS3 animations and if not it will serve a jQuery fallback solution, but I guess this is not the case.

A big downside of Adobe Edge is that it uses JavaScript (jQuery) to inject the CSS3 animations in the HTML while CSS3 animations, IMO, has to be controlled from within a stylesheet without the need of JavaScript.