20+ Animation Demos for CSS3 – It Just Got Better!

Web designing has taken a new level of excellence since the time CSS and CSS3 came out. They introduced features which were more user-friendly, time saving and visually dynamic. It has so many awesome features that some of them are still unexplored. One feature of it which is gaining a lot of popularity is CSS3 animation. Designers find it fun to work with and has provided them with a bigger scope of designing and using their creativity. In the rapidly developing world of internet, they are very useful and provides a nice experience. With 20+ Animation Demos for CSS3 – It Just Got Better!, you can have a look at our collection of CSS3 demos and tutorials, learn from them and take ideas to create your own. Have fun!

Elastic Thumbnail Menu

In an ongoing attempt to offer alternative methods to spruce up menus, author have pieced together an elastic thumbnail menu.

Coverflow effect featuring CSS transformations and jQuery UI

This proof-of-concept shows a coverflow effect using the new CSS transformation feature from Webkit (featured in Safari 3.1). Needless to say that it won’t run in other browsers at this point (however, adapting it to canvas should be quite easy, and even now, it won’t break in other browsers).

Recreating the OS X Dock

We take a basic list of links and turn them into an awesome OS X dock of icons.

CSS3 Clock With jQuery

Old School Clock with CSS3 and jQuery.

More on 3D CSS Transforms

Various 3D CSS Transforms in an overview.

Snowy CSS3 Animation

It’s cold and snowy down here in Brighton, so to celebrate the falling white stuff (and of course the various festivities at this time of year) Clearleft’s very own Natbat has made a snowy CSS3 animation surprise for all you Safari and Chrome users out there.

CSS3 animations and their jQuery equivalents

This tutorial/these examples will show the use of the same HTML, with different classes for CSS3 and jQuery. You can compare both the codes and see which one you like more. Don’t forget to check the demo/download the source code to view how everything is working under the hood.

Going Nuts with CSS Transitions

Author is going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.

Awesome Overlays with CSS3

The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.

Use CSS3 to Create a Dynamic Stack of Index Cards

We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).

Amazing Image Hover Effects using Webkit and CSS

Sliding Vinyl with CSS3

We take a standard album cover, a little HTML, and some CSS3 transitions and transforms to create a sliding vinyl effect for showing off the music you love.

Spotlight Cast Shadow

Move your cursor over the box to cast a shadow with the spotlight. This demo uses the CSS property text-shadow, supported in Safari, Firefox 3.5, Opera, and Chrome.

CSS3 Analogue Clock

Analogue clock created using webkit transition and transform CSS. JavaScript is only used to pull in the current time.

Frame-by-Frame Animation

The first demonstration reqires you to keep clicking the image to see the next frame, and it wraps around to the start when you reach the last frame.The second demonstration just needs you to keep the mouse moving over the image in MOST browsers. But the BIG drawback to this method is that the speed of movement of the mouse governs the speed of animation.

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? While thinking of alternatives to the usual horizontal panels, I thought it would be nice to create something that works in a similar way, but that is a bit more flexible.

Space is the final limit, right?

No matter how fast internet tubes or servers are, we’ll always need spinners to indicate something’s happening behind the scenes. Up until now, people would go to some site, pick one of the available templates, customize their foreground and background colors, and download a beautiful GIF image.

Bokeh effects with CSS3 and jQuery

This tutorial teaches you how to re-create the bokeh effect with CSS 3. With some help from jQuery, we can add some randomness in colour, size and position for the effect.

jQuery DJ Hero

By combining CSS3 and jQuery, I created two records that you can start spinning (faster and slower) and even scratching is enabled. In a future version, this could be used together with some real sound (this version has no sound).

Dynamic PNG shadow position & opacity

When the light is turned on, the position and opacity of the logo shadow will change dynamically, depending on the position and distance of the light bulb. Don’t forget to drag the logo and/or the light bulb around!

Colourful rating system with CSS3

We’re going to do a relatively simple jQuery tutorial. Rating systems are used a lot on websites, for example to rate how good a certain product, article or comment is. I slightly wanted to improve this idea, by making it more visually attractive.

Colorful Clock

Make a colorful jQuery & CSS clock, which will help you keep track of those precious last seconds of the year.

3d animation using pure CSS3

The perspective property is what we need to create the 3d effect. Using transform and transition, we can create 3d animation using pure CSS3.

Display social icons in a beautiful way using CSS3

The example works with all -webkit based browsers (Safari and Chrome), but also in Firefox 4. Author’ve included a jQuery version as well, to be used as a form of “backward compatibility”. You can also see how the same effect can be achieved using CSS and jQuery.