One of the most interesting about the coming CSS3 is it’s capability to animate elements without the use of javascript, but if you combine the two it is more powerful. In this post I will be showcasing to you an array of awesome examples using the new CSS3 animation feature.

As we all know that only few browsers supports CSS3 so this samples can be best viewed in Safari 4.x and Google Chrome.

1. Sliding Vinyl with CSS3

View the working demo here.

This example the author uses plenty of CSS3 functions and feature.

• gradient
• rgba
• transition
• transform
• box-shadow
• border-radius

2. Dynamic Stack of Index Cards using CSS3

View the tutorial and demo here.

It uses the CSS3 features, the transform and transition for the dynamic effects and @font-face, box-shadow and border-radius for the styling.

3. CSS3 Clock

Read the article by Chris Coyer here.

The author uses transform:rotate feature of CSS 3 which lets you rotate elements. Transform will also allow you to scale, skew and translate (move) objects in your web page. All these can be animated by the Transition property complete with easing and duration.

4. An analogue clock using only CSS

View tutorial from fofronline.com here.

The magic that rotates the clock’s hands comes via two WebKit specific CSS proper­ties, -webkit-transition and -webkit-transform. The transform property can alter the appearance of an element via a two dimensional transformation, for instance: scaling, rotating and skewing a DIV element. In this case it is used to rotate the clock hands to the correct angles.

5. Falling Leaves – Using CSS Animations and Transforms

See the Demo.

This demo uses a webKit specific CSS3 properties the -webkit-animation and the -webkit-transform.

6. The Rocket Animated using CSS3

View tutorial page and Demo.

7. Polaroid photo gallery

Read the article from 24ways

8. CSS3 Spinner

Read the turtorial and see the demo here.

This is basically like an ajax/loader spinner except its not a animated gif. It uses CSS3 to make it spin. This was thoroughly explained in this article in 24ways.

9. 3D Animated Poster Circle

View the demo in action.

10. DJ Hero

View the demo in action.

This is built using jQuery and CSS3.

11. CSS3 Snowflakes

See Demo in Action

12. CSS3 Snowflakes

See Demo in ZURB Playground