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.
Mark, 9 April, 2013
Take a look at this one to see how far you can go with ONLY css
http://markqian.com/css3
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.. :-)