Here is a compilation of 47 jaw-dropping CSS3 animation demos. They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as Javascript alternatives. Most of them are simply to look cool. In order to veiw these effects, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). Enjoy!
CSS3 Clock With jQuery
Analogue Clock
3D Cube That Rotates Using Arrow Keys
Multiple 3D Cubes (Slide In/Out)
CSS3 Accordion
Auto-Scrolling Parallax
Isocube
Image Gallery
Matrix
7 Javascript-effect Alternatives Using CSS3
Image Hover Effects
Turning Coke Can (Control With Scrollbar)
3D Meninas
Polaroid Gallery
Space
Note: this one is graphic intense and takes a while to load, but the result is crazy!














































it was realy amazing
its was amazing… i wanna be a website designer…
it is was beautiful demos, i want try it
Great roundup.
Though I’d like to see some more animated scenes that are purely css, i.e. no images used, not even background images.
This tutorial is really interesting and guided me a lot. I came across many new concepts and I am hoping to improve even more..
Whooo awesome!
Its really awesome….
I love your post. I will begin do something with css3 now, thanks for your sharing.
it is was beautiful demos ^^
we can do a lot in css3……
This is an amazing collection and I have barely touched them. Favorited and will be back to go through them all. Cheers!
really amazing
good job!!!!
Wow! CSS certainly IS evolving, isn’t it.
Thank YOU for posting these
- Trish
really amazing things can now be conjured up in css
whenever I am exploring this topic, my pants are falling down
really really
because these little wonders make such an impression on me :-)
best
ffsdfdfsdf
It’s really wonderful!!! I love those!! :)
Here’s a site with some of these techniques put into practice:
http://maureennoel.com
It’s a single-serving site for a novelist’s new book, but not without quite a bit of animation. Looks best in Safari/Chrome/Firefox.
Thanks for the list! I like the “3D Meninas” Demo :)
Amazing code , thanks !