20 Excellent Examples of CSS

With the launch of the iPhone 4 and the general increase in mobile web use (aka the iPhone, iPod touch and iPad), the value of animations done using the all new CSS3 or Cascading Style Sheet 3, has risen dramatically.

Throw in the fact that Adobe Flash is a forbidden fruit in the world of iDevices, CSS and JQuery powered animations are going to rule the next generation of rich internet media. CSS3 allows designers to write light weight animations that can be easily embedded into web pages and best of all they don't have to bind it with any license like with Flash which is a protected commercial platform.

We have handpicked our top 20 examples of great animations created using CSS3 and JavaScript. Some of these demos contain downloadable source files too so that you may play with them later on.

NOTE: CSS3 animations require a WebKit engine based browser which means you can only view them on Google Chrome or Apple Safari. Although some of them work on Firefox , most don't.

1.  Image Gallery based on CSS3 Transitions

You won't believe it but this image gallery has been completely designed using CSS and JQuery calls. CSS3 transitions have been used to create the event listeners. Chrome & Safari are fully supported but it also works fine on Firefox.

2. 3D Object Rotation Using Arrow Keys

Again, there is absolutely no Flash involved here. The coke can rotates as you scroll the bar to the right and the can looks like it's a 3D object. CSS Displacement maps were used to create the illusion of  3D object movement.

3. 3D Object Rotation Using Arrow Keys

This sample gallery titled "Land of Nomads" is yet another beautiful example of a purely CSS based interactive Image gallery. You can click any image from the pack of jumbled images and it would be enlarged and moved to top left corner of your screen to make it prominent. See the speed of it's load time since there is no Flash involved here.

4. Three Dimensional Space Simulation

Now this example is simply awesome. It's not just images or animations, it's complete space simulated in 3D right in your browser. You can only view it on Chrome and Safari. Probably there are multiple layers of images that give 3D effect when combined and rotated on their own axes. It's all the play of writing a "spinner" in CSS and then timing it to make it 3D.

5. Rotating Color Band Timer

A perfect example that you can enlarge and make your wall-paper. The 3 color bands that revolve around the Hour, Minute and Seconds ticks are simply amazing. You cannot spot any delay in the movement of the bands as is usually the case with Flash.

6. Elastic Thumbnail Menu

This will work great for any online product display website or website that has thumbnails spread over their pages. CSS has been used to animate the thumbnails so that when you hover over them, they are enlarged to make them prominent and also give an overall cool look. Definitely recommended for Shopping websites.

7. iTunes Like Slider in CSS

This animated icon tray runs really smooth in both Chrome and Safari and resembles the much acclaimed iTunes Icons Slider. You can move the icons right and left with the slider or with left and right keys. JQuery UI is used to give it the sleek look.

8. Animated DJ Discs

CSS is used in clever combination with JQuery to create this visual DJ that can be controlled with a mouse. You can actually rotate the discs with mouse and the sound pitch changes accordingly. Again, JQuery UI was employed to create the rotation motion effect.

9. Dynamic Index Card Stacks

This looks similar to the Image galleries we have reviewed so far but it's not. The difference is in the way the cards come to the foreground and do not move around the screen. Previously these animations would have been written using the Adobe Flash platform but now the light weight CSS+JS has taken it's spot. A cool application for this card stack would be using them in an online book reader. You can read the tutorial on how to make this animated card stack here.

10. Fixed Motion Animated Image Gallery

This is yet another Image Gallery created using pure CSS (not even JS). Images are jumbled up with their captions at the bottom right of the images. The hover over effect has been added so that the images rotate and align themselves when the cursor moves over one of the images.

11. Vertical Button Menus

Usually JS is used in creating dynamic animated button menus for websites but with pure CSS3 that is now possible without any JS at all. The proof is this demo showing vertical menu bars with different number of button ordered vertically and which respond to hover-over event of the mouse. This demo is by Toby Pitman, an acclaimed CSS/web designer.

12. Docking Menu

This menu is designed and written using SVG and CSS3 Transition (a previous review used Transitions to create animated Image gallery). Just like the Stack of Cards example, here the menu items respond to the hover-over event they are enlarged and brought forward when you move your cursor over them. The total programming that goes behind this animated menu is not more then one page and creates this stunning user friendly menu!

13. Movable Sticky Notes

This is simply awesome. You wouldn't recognize that CSS is used in creating these animated sticky notes. You can create new notes on the browser page, edit them with full text alignment support, move them around and then delete them right from within the browser without any Flash involved. HTML5 Client side Data storage concepts are used to hold the data written on the notes. This is true UI in action!

14. Snowball Effect

You might have seen this snowfall effect before where it was written in JS , but here they've used CSS3 Sliders to write the snowfall effect. It may be Summer heat out but this snowfall effect can add a cool feeling to your pages without taking any extra processing as is the case with Flash whose FLV decoder puts a lot of load on the CPU.

15. Cartoon Animation

Now we also have animated cartoons, not just animated images done completely in CSS. This demo by CSSPlay UK definitely shows the potential of creating rich content on the internet using CSS and JS. You have to keep the mouse moving over the frame to keep the animation running. In the Firefox version, you have to keep clicking your mouse to keep the animation running. A smart use of CSS Selectors made this happen.

16. Dynamic Animated Content Gallery

Something that was previously done using the Adobe Flash dynamic-button event handlers is now completed done using JQuery UI with CSS3 and what you have is a complete dynamic content gallery. In this demo, a matrix of thumbnail sized images are on display and each image responds to the hover-over event and a card is created next to the cursor with the information of that image. Everything is handled dynamically with out any delay at all. The images are of presidents of countries around the globe. You will have to click download on the page to proceed to this animated gallery.

17. Tab Slider

This is an impressive example from CSS Ninja where tabs containing a title bar with some content in plain text are arranged in close order. They expand upon clicking them and contract again when another tab is clicked. The content is static but the animations are done in real time. The accordion effect of CSS3 is used here to create this animated tabbed text.

18. Completely Animated AT-AT Walker

The capability of animating multiple objects in a frame simultaneously in CSS3 has been demonstrated here with the robot AT-AT made up of many components and each one is moving in it's own defined course at the same time. This gives an illusion of an object moving around in the frame. Even the background is changing according to the movement of AT-AT.

19. JQuery+CSS Sleek Menu

This is by far the best sliding button menu that CSS has to offer. Not only is it animated like the images in the CSS based gallery, but the thumbnail sized buttons change their color while in inactive mode. A button becomes visible with all its colors when you hover over it. A transparent layer is spread over non-active buttons while the cursor is on one of the buttons. The designer claims that Flash will be obsolete when animation this rich can be written using open standards of CSS3 and JQuery.

20. Dynamically Expanding and Movable Image Gallery

Yet another CSS based Image gallery but a lot different from the ones reviewed in the above examples. You can completely move around in the gallery with arrow keys. The gallery slides smoothly when moved and the images also are expanded upon hovering over them. Another proof-of-concept of what CSS3 could achieve.

Written 2010-07-05 (Updated 2016-10-10)

Chad Bean

Share your thoughts

Mark,  9 April, 2013

Take a look at this one to see how far you can go with ONLY css


Brett Widmann,  4 December, 2010

This is a great collection of examples. Thanks for sharing.

Web design hippo,  23 September, 2010

These are awesome!

I really like the animated ATAT :P

reader,  21 August, 2010

Links for #2 and #3 are the same, I guess #3 should be corrected.

clippingimages,  17 July, 2010

nice combination of stuffs pal.. cool! keep going on.. :-)

Show all related articles..

Overall Best Web Hosts

Buying Guide

Are you finding it difficult to understand what type of hosting you need or which provider to go with? Go through our guide and find the best solution


User Reviews

Make your voice heard! Rate and review your web hosting provider - good or bad, we want to know

Everything has been very stabile and I was very impressed with all the features and extras that were included in the plan.

Bill about iPage

Read iPage Review

Why wait? Get today's best deals now!