There has been lots of talk lately about HTML5 and CSS3 replacing the need for a Flash plugin someday. Flash of course is the dominant technology behind most online advertising today and thus one of the main vehicles by which websites are able to make money and sustain themselves. In order to truly replace Flash, these technologies HTML5/CSS3 will need to show that it is at least as good as Flash at doing the sorts of rich, eye grabbing ads that advertisers require. To that end, I have been researching what it takes to reproduce what we currently do in Flash, in CSS3.
Here’s an example I put together of a purely HTML/CSS3 animation. I would recommend viewing it in Google Chrome or Safari. It runs well even on the iPad or iPhone. This is meant to approximate some of the Flash banners that we currently do.
Click Here: CSS3 Animation Example
For other examples of CSS3 animations, I recommend checking this out.
At first glance there is a lot to be excited for about CSS3. For one, Safari and Chrome already support it pretty well thanks to the fact that they both use Webkit. IE9, FireFox and Opera are also not far behind. CSS3′s new syntax adds support for transforms and keyframe animations – two fundamental features for doing animations. Most implentations of CSS3 are also hardware accelerated meaning they run fast both on the desktop and mobile devices such as the iPhone. This is one area that Flash is still struggling and is a big win for CSS3.
The lack of a need for a plugin will definitely be attractive for some. Flash takes a lot of heat for consuming large amounts of CPU resources and for being ‘over-used’ (ie, having confusing or inconsistent user interfaces). I have a feeling that most of the things that people fault Flash for will also be problems with HTML5/CSS3 as people learn to take advantage of the technology. People just aren’t doing the same types of things in HTML yet.
The biggest problem right now for CSS3 is the lack of visual tools for generating animations. In an ideal world, you could make an animation using WYSIWYG tools like Flash, click ‘Publish’ and the application would spit out a directory containing an .HTML file, a CSS file and any associated resources (such as images) and it would run the same in every browser. Currently that is not the case – you have to bust out your text editor and start inputting coordinates, angles and keyframes by hand. I suspect that
Further reading: CSS3 Ads Versus Flash Ads