Last class was the introduction to CSS, and for the first time, I could see how my website is getting a visual personality. Rauirí mentioned some of the possibilities we can have with CSS, but also he said we should avoid some of them. That we can use them, doesn’t mean we should!!

We are supposed to never use 3D CSS effects, but when I found some of them I really loved them!!  

Ok, maybe I won’t use them in a generically structured website, but these effects are amazing for some brutalist, experimental, artistic kind of websites! I’m far from design one of those, I’m still finding confusing how to select by position a specific element in the HTML document and apply the rule in the CSS document.

The rise of CSS3 has given birth to a new era of non-Flash animations via the transform and transition properties. But complex animations are a mite challenging to master, even for some veteran interface-developers. Enter CSS3-animation software like Sencha Animator and Tumult Hype.

I am in love with Sencha Touch so Animator immediately caught my attention. I’ve explored it a little and it’s an elegant solution for WYSIWYG animation. I haven’t played with Hype but it looks like a decent application as well. And it’s a quarter of the cost of Animator.

But there are two key components to why I like Animator better (even without having tried Hype):

Sencha properly markets Animator as a CSS3-animation utility whereas Tumult blathers on about HTML5 in the Hype descriptions. HTML5 is a hot topic but it has nothing to do with CSS3 animations. And while there is a sea of people who carelessly blend HTML5 and CSS3 into a false conglomerate, I expect more from web professionals and anyone making software for web professionals. This leaves me feeling a mite apprehensive about the software itself.

Animator produces real-world CSS3 while Hype’s output is quite cryptic. I commend Tumult for producing efficient code. But {f:"2",t:0,d:0.5,i:"e",e:"1.000000",r:1,s:"0.000000",o:"CB7F22CA-75A1-42AC-B06A-F4590D99E36A-9352-0000A098050E85CB"} isn’t human readable. And when we step away from the open-source character of web development we lose the core of our industry. Being able to read code is how we all learn in this profession.

A quick demonstration of a CSS transition animation vs a javascript (in this case MooTools) animation on a website I'm building. Notice that the CSS animation can do sub-pixel rendering, which might make the text a little blurry, but hell it's so smooth compared to javascript which has to move an element pixel by pixel.

In our quick tests with desktop browsers, large animations (ie, over a large amount of pixels) are generally quicker - or at least give less screen redraw bugs - when doing them by javascript methods, and you'd never see any sub-pixel rendering anyway. I guess that's because javascript animations are everywhere, and browsers are well optimised and debugged for them.

But small pixel animations appear much more jerky when done by javascript, where CSS transitions are visibly much, much smoother.

Having said that, on iOS devices CSS transitions win almost every time in speed and smoothness.

This site used modernizr to detect the capabilities of the browser and get it to carry out animations by the most appropriate method.