I love css3, have I told you already? Love it.
Anyway, I wanted to see what I can do with transitions and animations in webkit, and I made this :
Click the Image to see the live demo
Firefox + Webkit browsers
In Webkit, all the animation and the calculation is in CSS!!
I did cheat however : I used js to determine the current time. Now way to do that in css. I didn’t want to include jquery here, as u can see all the code is pure js, but I had to because it’s dufficult to do browser detection properly with js.
Lessons learned :
- CSS3 is awesome!! Especially the way webkit does it (transitions, animations)
But it still has a LONG way to go untill we see compability cross browsers
- In Safari and Mobile safari, the arrows were jagged untill I gave the css-shadow, So it seems that giving this property turns on antialiasing somehow. Cool