Feb 03

Tagged in: Coding, CSS Comments:Add

47 Amazing CSS3 Animation Demos

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)

Delicious Stumbleupon Digg

What to Expect in 2010: UX/UI Design Simplicity Free Vector Social Media Set

Comments

Pages: 9 8 7 6 5 4 3 2 1 » Show All

There are 83 comments (+Add)

83 Vince DePalma http://www.vincentdepalma.com
March 17th, 2010 at 4:57 pm

Awesome examples, i will definitely be coming back to check out this page and try out a few of these, particularly the mac dock and the 3d images. The parallax backgrounds are nice but got a little dizzy watching it
82 rohit http://www.websitereckon.com
March 5th, 2010 at 2:32 pm

WebsiteReckon outstanding web analytic tools on the internet today. You can use it for FREE. More than website value calculation, are target specific Traffic, pageviews. Fantastic!
81 Vivekanand http://www.developersnippets.com
March 3rd, 2010 at 12:47 am

Awesome collection of CSS3, I liked it a lot and thanks for your valuable effort which you have put…. awesome!
80 Calgary Web Design http://www.webcandy.ca/
February 25th, 2010 at 9:35 pm

This is an astonishing collection. I especially like the CSS coke can.

Thank you for the inspiration!
79 kurius
February 25th, 2010 at 1:15 am

Ya know, these are pretty neat really. I’m kurius to see where css3/html5 go and what happens to javascript’s role on the web.
I am kurius if anyone was having the same effects as me though.. checking all these pages out, I (instinctively) was monitoring my cpu cycles and ram use. I noticed that ram wasn’t terribly affected, but I didn’t get it back once the tab was closed. With the css3 animations, they use quite a lot of cpu cycles, I was very surprised.. on average, my cpu jumped from 6-15% (normal net browsing) up to 30-35%. When I was looking at the heavy animations, the cpu jumped up to 50-57%. This is really high to me. When I view flash sites, they take 45-50% of my cpu cycles. I thought one of the advantages of css was decreased use of cpu..
These were my experiences and thoughts as I was viewing this article. Just kurius what impact it had on your machines..
78 capsiplex http://www.capsiplexzayiflamahapi.net/
February 23rd, 2010 at 5:30 pm

Thanks for sharing!! There are a bunch here I will have to try!
77 Andrew http://www.fohow777.lt
February 22nd, 2010 at 2:39 am

3d cube is the best
76 Jonathan Butterworth http://thedesignshaman.com
February 18th, 2010 at 1:16 pm

Are you serious?!?!?! This is great! In fact, I have already used the “Coke Can” to showcase a can design we did for a client.
75 Rabursky http://rabursky.pl
February 17th, 2010 at 1:30 pm

There you’ve got other demo of CSS3
http://rabursky.pl/css3d/
Greetings!
74 izi
February 17th, 2010 at 8:31 am

eRepublik to gra łącząca aspekty polityczne, militarne oraz gospodarcze. eRepublik ma światowy zasięg, zarejestrowanych jest prawie 400 tysięcy graczy, z czego 65 tysięcy to POLACY (najliczniejsza nacja)!
Polska jest w tej chwili wplątana w liczne walki i potrzebujemy jak największego napływu nowych graczy, którzy pozwolą nam stworzyć potęgę na skalę światową. Nasz najważniejszy cel - aneksja Niemiec został wykonany!
Chcesz walczyć przeciw innym krajom i w kolejnych powstaniach, które wybuchają w podbitych regionach?
Od niedawna jest także język polski, jako jeden z możliwych do wyboru w grze, co na pewno spodoba się wielu nieanglojęzycznym graczom!
Pomóż Polsce! Dołącz już dziś!
http://pomoz-polsce.tk/

P.S. Najlepiej używać skrzynek e-mail na serwerach yahoo i gmail