Doing Flash style animation in CSS3

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

You’re welcome to view the source to see how it works. I defined the basic structure of the scene in the HTML, just like I would build a scene in Flash (with objects and sub-objects). I used CSS and the new ‘transform’ style to position elements. Then I defined the animations using the CSS ‘keyframes’ entity. Finally, I used a bit of javascript to sequence when animations start, and to hide elements before they are needed (though it is possible to do this entirely in CSS as I later discovered). Leveraging CSS3 instead of something like jQuery for doing animations is definitely the way to go, if you are targeting these devices. Javascript based animation might run fine on the desktop, but performance is pretty abysmal on mobile devices like the iPhone and iPad. Using CSS3 allows the browser to pick the most efficient methods to render your animations and will always be more efficient.

For other examples of CSS3 animations, I recommend checking this out.

Good and Bad

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

Another problem has to do with the basic behavior and structure of animations in CSS3. It’s pretty clear that the animation format was written with the goal of doing simple things like mouse-overs and popups, not scene based animation. Currently, when an animation runs, it takes over tweening whatever styles you want it to tween. When it’s finished, those styles revert to whatever they were set to before the animation begins (which is great for a mouse-over). It’s not clear how to get an object to animate and keep the final state without falling back on javascript and DOM animation events to set a different CSS style. The ability to specify whether animations permanently affect style settings would be a useful feature.

Further reading: CSS3 Ads Versus Flash Ads

Leave a Reply

Close Modal

Contact Archer

Close Modal

We know you're still using an older version of Internet Explorer. Do you know how much mind-blowing stuff you're missing because of this?

Save yourself. Upgrade now.
We'll help you...