Dan Eden
Dan is currently studying Digital Media Technology at Nottingham Trent University. When he's not handcrafting CSS, he's usually down at the pub.
-
CSS powered slider with animate.css
The CSS3 spec has brought us web designers a lot of great stuff - typographic control, gradients, and image-free shadows to name but a few. One of the more experimental properties that the new specification brings is CSS animation.
The greatest thing about CSS animation (in my opinion, at least) is that it's hardware accelerated. Rather than putting the bulk of the work on the CPU of the user's computer, (like JavaScript animation does) CSS animation taps into the graphics chip for it's power. In other words, it's pretty darn good. It also means that we can leave JavaScript to the things it does best - logic, AJAX queries, and other smart stuff - rather than relying on it for purely visual events. It's a little like the way we used to use JavaScript for rollover effects on images - it's pretty much all CSS now.
There have been a bunch of smart people doing things with CSS animation, and it's evolving pretty quickly. I took it upon myself to create a library of pre-written CSS animations called animate.css, (inventive name, I know) and here I'll go through the process of building a CSS powered slider with a jQuery fallback.
The Ingredients
We won't need a lot for this sl