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!
Mac Dock
Drop-In Modals
Sliding Vinyl
Zooming Polaroids
Animated Rocket
Poster Circle
Morphing Cubes
Falling Leaves
Animated Polaroid Gallery
Spotlight Cast Shadow
Colorful Clock
Lightbox Gallery (Draggable)
Elastic Thumbnail Menu
Coverflow
Snowflakes
jQuery DJ Hero
Dynamic Stacking Cards
Another Image Gallery
Snow Stack (Control With Arrow Keys)
Animated Pricing Column
Slick jQuery Menu
CSS3
CSS Tabs Without Javascript
Tab Menus Without Javascript
SVG Fisheye Menu
Dynamic Presentation Without Flash
Rotating Gallery
Dropdown Menu
Another Fisheye
Frame-by-Frame Animation (Hover to Play)
Another Accordion
AT-AT Walker (No Flash or Javascript)
Very nice…, this is usefull for creating eBook3 and working in iPads using with this styles.
Niceee
yay stuff you could do in flash back in 1999, and SVG in 2002. Also, its not CSS, its webkit, and it only works in Safari for the most part. HTML5 wont be ready for the forseeable future, in the mean time, theres flash.
These are great! It’s too bad they are limited to Safari and Chrome…
Safari only. . . Really? Why bother? Why design things that only work on the browser with the smallest (by a very long shot!) marketshare?
Ditto. It’s a pity these also run grindingly slow on an iPhone. I keep ‘hearing from people who’ve heard’ that games are possible in HTML5, but have yet to see one that doesn’t run like a dog.
Wow…you really don’t get it do you? People do this kind of stuff because it’s fun, cool and possible. The point is to practice all this because we know browsers in a not so far future will be able to do this, not talking about the piece of crap browser called Internet Exploder.
Also most of the demos shown in the article is by the time of writing possible in at least Firefox and Opera too. Besides none of the above demos where client work, and anyone who isn’t a retard won’t care about making stuff work in IE (if it’s not client work of course).
The only reason stuff works is because people are testing and playing with it. The way you think you won’t get far, but by all means, keep standing in your corner because soon that corner will be very loonily. This goes out to Greg to who surprisingly agreed with you.
Nice Animation Effects Very useful.Thanks for Share.
Very Important Content……………..cheers….
Awesome really helpful… gr8!!
XzaDSFSDZFGSDVXZCVXCVXCVXCV
It’s really very nice and its help for me GREAT!
thanks for it
Great! I create a Nice digital clock design (http://explosivelab.blogspot.com/2012/02/css3-clock-design.html)… you like?
It’s very nice….