CSS3 Awesomeness– Part 1

For those of you who don’t know it yet, CSS3 has a ton of really amazing features available right now. Most of which are supported in all modern browsers*, and don’t even break the design for older and ‘quirkier’ browsers. What this means, in a nutshell, is that there’s no legitimate reason why you can’t give your more up-to-date audience a bit of a thrill using CSS3.

With that in mind, I’ve been reading about CSS3 transitions lately. They’re pretty sweet; they do a lot of stuff that we used to have to rely on JS to do. There’s quite a difference between the two though:

CSS3 Transitions vs. JavaScript Animations

Reasons for CSS:

1. CSS is gets some hardware acceleration that JS doesn’t. Plus, making really simple animations with JavaScript is almost more trouble then it’s worth, and adds more load onto the browser. CSS makes it really easy, which is my next point:
2. As far as simple transitions go, with CSS you only have to add 5 extra lines of code. And in future versions it’ll only be one line of code. The only reason you need 5 right now is because of browser differences (aka, you need the prefixed versions).
3. Using CSS for the ‘small stuff’ frees JavaScript up to do the bigger stuff. Such as an accordion box. No wait, we can do that in CSS now too. Okay then, a image slider. But we can do that in CSS too… Hmm. Maybe… Form validation?

Reasons against CSS:

1. Transitions are made for small animations. Animating an element from here to there, from #fff to #f00, to add a gradient on :hover, or whatever else your ingenuity tells you to. They are not, however, meant for large, spralling animations that cover an entire webpage.
2. Unfortunately there aren’t any event listeners in CSS. What this means is that you’re limited on when the animations occur, aka on :hover, :focus, when the screen size changes, and very few others.
3. You can’t pause a CSS transition. It goes from start to finish, and there just ain’t nothin’ you can do about it.

The reasons against CSS Transitions are fairly small issues, and they give no reason why you can’t use transitions for small stuff. Big stuff is another thing entirely, and fortunately CSS Animations are making a lot of headway right now. More on that later.

So I wanted to see how many transitions CSS can handle at once. With that in mind, I put together my own abuse of the CSS transition. Just to be facetious. It isn’t incredibly brilliant, or semantically perfect, but it sure was a lot of fun to put together! I didn’t find an answer to how many CSS can handle at once, but I did discover that it can do more then I’ll ever need. Take a look:

DEMO