Inspiration

The Beauty of CSS3 Animation

Feb 01, 2010 insic 12 Comments

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

About the author: insic

Subscribe in my RSS Feed for more updates on Web Design and Development related articles. Follow me on twitter or drop a message to my inbox.

  • http://designlovr.com DesignLovr

    Great collection of CSS3 effects.
    Thanks so much for featuring my Dynamic Stack of Index Cards as well :)

    • http://blog.insicdesigns.com insic2.0

      My pleasure, you did it very well. :)

  • http://www.sgdoeschwitz.de BigM75

    schöne effekte nur leider nicht in allen browsern sichtbar das ist schade

    • http://blog.insicdesigns.com insic2.0

      yes exactly, but we will get there soon :)

  • http://www.mariapapandreou.com maria

    Thanks for collecting those tuts! It’s nice seeing them all in one place! :)

    I love css3! :P :D

  • http://www.doublejdesign.co.uk/ Jack

    Seems that you upgrade your theme again. Nice work.

    • http://blog.insicdesigns.com insic2.0

      ;) thanks

  • Pingback: The Beauty of CSS3 Animation | INSIC DESIGNS « Raghu-Net

  • http://www.satine.org/ Charles

    Nice article! Have you seen Snow Stack, another 3D CSS effects demo?

    • http://blog.insicdesigns.com insic2.0

      cool. thanks for sharing it.:)

  • arnold

    the only problem , some browser dont understand what is css3….but anyway article was good.

  • http://Website(optional) andyw

    After reading you blog, Your blog is very useful for me .I bookmarked your blog!
    Wishes your valentine day to be joyful!