Playing around with CSS3 animations and made this: http://pedroduarte.me/lab/toaster/ (click on it the toaster)

 

Not quite there yet, I want to make it more animated, but what do you guys think for now?

Edited January 22, 201214 yr by Pedro

In every browser it will only play once. Refresh to play it again.

 

Thats a good point but the point is to do it in CSS3

 

Thanks man!

In FF 9.0.1 the animation only works once?

 

Would have personally used Jquery for this as it would have worked over a larger range of browsers.

 

with CSS3 now having animation functions I would prefer not to use Jquery myself, as there is still a number of people with java runtime either disabled or not installed at all, cause they heard it might be dangerous.

I'd personally use Jquery as a sort of backup if it was an importaint animation.