47 Amazing CSS3 Animation Demos

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

Comments

Pages: 5 4 3 2 1 » Show All

There are 44 comments (+Add)

44 alyssa http://www.twitter.com/pixel8design
February 4th, 2010 at 11:34 pm

I am DEFINITELY loving the cover flow and Mac dock ones! I’ve seen the rotating Coke can before, I just wish I knew enough with coding to use it! I’m just starting out (in fact I’m working on my very first web page for my midterm), and can use all the help/advice I can get! Great post!

43 The Frosty http://austinpassy.com
February 4th, 2010 at 8:11 pm

That’s really awesome! Amazing what CSS can do, just give it a few more years!

42 SDC Software http://www.sdc-software.com.mk
February 4th, 2010 at 5:28 pm

Great Post. Nice to see what CSS3 is capable of.

41 Igor Ivankovic http://www.taptapdesign.com
February 4th, 2010 at 3:55 pm

WOW, pretty nice effects using only css and html. I feel it will only get better given in the hand of creative designers! Bravo for this post, and i hope css3 will become standard fairly soon!!

40 Lucho
February 4th, 2010 at 3:16 pm

It is not working in Firefox too… that is something to worry about!

39 designfreek http://www.webdeveloperjuice.com/
February 4th, 2010 at 12:45 pm

Good Post.. Really very nice collection and thanks for adding my blog link

38 Rishi Patel http://www.monazu.com
February 4th, 2010 at 12:24 pm

Awesome post! I had no idea CSS could be so versatile.

37 Richard http://www.fruitpixel.com/
February 4th, 2010 at 10:59 am

I love CSS3 - just need the browsers to catch up!

36 Words are Pictures http://www.wordsarepictures.co.uk
February 4th, 2010 at 10:52 am

Cool that you you can do these things but honestly, some of them are really clunky and again, the browser thing is annoying. You can’t expect users to have to upgrade every time a coder learns a new trick when their old flashplayer3 did exactly the same thing 7 years ago. And it was smoother.

35 Frank Stallone III http://www.iamfrankstallone.com
February 4th, 2010 at 10:36 am

I like how Chris Coyier’s CSS3 Clock With jQuery had a clunky analog feeling seconds hand and the Antique Clock has a smooth digital feeling seconds hand lmao.

Pages: 5 4 3 2 1 » Show All

Post Your Comments