CSS3 Animations are Fun!

So I decided to try out webkits css3 animations. Been seeing cool things crop up lately and I wanted to try my hand at doing my own animations, and see what they are capable of. I came up with a timed rotary counter. The below example uses no images, or javascript, its all css. I cant wait until this is standard.. no more clunky markup for shadows, or creating gradients in photoshop.

Project Link

Overall the webkit css animations aren’t that difficult. The trickiest part was giving the illusion of the counter looping around. I just did this by adding a 0 at the end of the element, and changing the top position back to the original value at the end of the animation.

A New look

Was a bit sick of the older design, it had some weird issues plus honestly I really began to hate it. I am liking this one a lot more, kept the whole light bulb concept from the old design, but other than that pretty much everything else is different. Wanted to incorporate text shadows too, I think they look slick in modern browsers. It also gave me a chance to check out how themes are done in WordPress 3.0, they seem easier, and the CSS is definitely much cleaner. All I needed to do was modify the default 2010 design slightly, and I needed to make maybe 5 markup changes overall.