CSS3 Animation for the Inter-webs

So pretty much everyone has purchased a ticket on the HTML5 train to the future of web standards, but many of us have not been paying attention to the sites and landmarks along the way to our final destination. All aboard the HTML5 express… If I can turn your attention to the right-hand passenger window, you will notice “CSS3 Transitions, Transforms and Animation.”

If you’re not a big bird watcher, you might have missed all the Tweets flying around about how cool CSS3 Transitions, Transforms and Animation really are… And for that matter, you might not even know what I’m writing about… let’s do a quick review.

So CSS stands for “Cascading Style Sheets.” CSS is a style sheet language used to describe the presentation semantics… HTML. We use CSS to style our websites. Well just like everything else, the inter-webs evolve; We had CSS1, CSS2, and now CSS3… ah, the inter-webs are growing up.

Look Mom, no Javascript

When it comes to animation on the inter-webs, the technology that we go to first is usually Flash, GIFs, or Javascript. CSS3 now gives us an alternative technology for animating the web.

Let’s first look at some demos of the new coolest CSS3 landmarks from Richard Bradshaw’s website. His website has been Tweeted like crazy this last week. We’ll look into some of his CSS3 code examples… ease-in-out. This is just as advertised. It will ease in, then ease out whatever animation you tell it to. The example Richard Bradshaw shows us is…

#id_of_element {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

There are a few different lines here that are doing the same thing (-webkit-transition, -moz-transition, -o-transition, -webkit-transition, transition), but these are just being called differently for the different web browsers because of their own proprietary browser tags. In this one-second animation, all the styles (whatever they maybe) are being animated by the “all” that follows the semi-colleen.

“A value of ‘none’ means that no property will transition. A value of ‘all’ means that every property that is able to undergo a transition will do so. Otherwise, a list of properties to be transitioned is given.”
- http://www.w3.org/TR/css3-transitions/

If you’re in love with CSS like I am, then you understand this is as sweet as a box of chocolates on Feb 14th. Let’s look at some more stuff without getting too far into one area, Next 2D animation. Richard shows us how to skew, scale, rotate, translate, or rotate-skew-scale-translate in one line.

Example:

#skew {
transform:skew(35deg);
}
#scale {
transform:scale(1,0.5);
}
#rotate {
transform:rotate(45deg);
}
#translate {
transform:translate(10px, 20px);
}
#rotate-skew-scale-translate {
transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);
}

Again, the animation on this is amazing and with no Javascript. By programming these kinds of animation effects into CSS and not needing to rely on JS libraries, we can cut down the web development time and create sweet web site animations.

CSS3 Blanket{display:wet;}

There are many cool web site and mobile app animations effects you can do with CSS3. You can read more about how to implement these at the W3C website.

Sadly, all these great new special effects we can do in CSS3 can not be done with all web browsers. Most animation effects in CSS3 only work on WebKit and some only work in Safari browsers.

“Currently (May 2010), transitions and 2D transforms are available in all current browsers (at least in a dev build) apart from Internet Explorer, 3D transforms and animations are only in Safari. Most examples degrade nicely, so if you are using a legacy browser you can still use a site using these, you just won’t get animation. 3D transforms generally don’t degrade nicely, so be careful when using them.”
– http://css3.bradshawenterprises.com

Okay another quick review…

“WebKit is a layout engine designed to allow web browsers to render web pages. ”
- http://en.wikipedia.org/wiki/WebKit

So the short story is WebKit is made by Apple. Webkit is what Apple’s Safari and Google’s Chrome web browsers run on. Safari and Chrome run CSS3 effects like magic; FireFox is a Gecko web browser and is not running WebKit, so there are a limited amount of effects. There is no hope for a union between the older versions of Internet Explorer and CSS3 animation, but IE9 is around the corner. Who knows what IE9 will (or won’t) be able to do? IE9 will be more CSS3 Selector friendly but will it support animation effects?…  I think you know what the magic 8 ball says about that one.

Put your WebKit together

So why is WebKit the only kid on the block that can perform these CSS3 animation effects? Because Apple built it into WebKit. More browsers technologies will follow in WebKit’s path, it is only a matter of time… but for now WebKit can animate the HTML5 train to the future of web standards.

Be Sociable, Share!

• 

No related posts.

Frederick's persnickety programming is stricter than your fourth grade English teacher, meaning it meets all accessibility guidelines and renders just as designed across all browsers in all platforms… and smelling like chalk on a blackboard. Frederick has over a decade of development experience as a web guru and holds a fine arts degree from the Ringling College of Art and Design. When Frederick isn't programming, he is dreaming of programming... seeking truth in code.

Published by Frederick Weiss Comments:1 Comment
Published in Technology, Web Design