You no longer need Flash to create web-based animations and interactivity. Here are 15 of the best experiments in CSS3 animation to inspire you.
The latest CSS3 properties have opened a multitude of new doors to web designers and developers. It's now possible to create animations and interactivity entirely in CSS markup, without going near Flash, Silverlight or After Effects.
To see all our CSS3 posts, click here
This illustrated animation of AT-AT Walker from The Empire Strikes Back by Anthony Calzadilla is created entirely in CSS3. Click on the ‘view the bones’ link on the iPad and you can see how each part animates and functions. This great piece of work suggests we're going to see a lot more of CSS3 introduced with online gaming.
This entertaining CSS3 rollover created by Stu Nicholls enables you to horizontal-run your cursor along the image and watch Zoidberg from the sci-fi cartoon Futurama dance on the table. You can also repeatedly click on the image above and watch each animated state.
03. Animated Buttons
This series of demos, featuring icons by webiconset.com and a symbol font by Just Be Nice, showcase seven beautifully animated link elements with different styles, hover effects and active states. The animation is marvellous, although we're not to sure from a user perspective about the way the information is hidden until you hover over the link .
In another great demo series, Alessio Atzeni has created some brilliant CSS transitions. Hover over the thumbnail and the CSS animation reveals further information in a way that makes you go wow. There is a great selection of transitions with 10 different demos to choose from. If you want to integrate this rollover effect on your own site then follow this tutorial.
This animated title sequence for the hit TV drama Mad Men showcases what CSS3 animation has to offer in the form of ultra-smooth video. It was made by Anthony Calzadilla, Geri Coady and Andy Clarke, and if you work in web design, you'll notice a few familiar names and faces. To find out how it was created, see this blog post.
NOTE: This CSS3 animation only works in WebKit-based browsers, which include Safari and Chrome. Alternatively, you can watch it on the YouTube video above.
This demo lets you gaze around the Apple Store in 360 degrees - an amazing virtual scene in your web browser which you can navigate without the need for any additional plug-in software. CSS transforms are used to position six images in 3D space to form a cube with the user's viewpoint inside. As you navigate, the cube is rotated to reflect the new appropriate position. NOTE: Best viewed in Safari.
Not only have @MrDenav and @lucasmarinm of bluedashed.com recreated some classic record covers using pure CSS, they've also made them react to music. Demonstrations include First Impressions by the Strokes and Joy Division's Unknown Pleasures. NOTE: Only works in Google Chrome.
Roman Cortes' Pure CSS coke can has been painstakingly assembled using fiendishly clever background-positioning, giving the convincing illusion that the can is rotating when a visitor scrolls left or right. (You may have noticed that this is actually CSS 2.1 rather than CSS3, but we loved it so much we couldn't resisting including it in this list!).
Doesn't this just take you back? Andreas Jacob's retro Super Mario
leaps off the page using 3D transform and rotation to ruthless effect. A CSS3 animation to make you feel young again! NOTE: Supported browsers are Safari 5 & Chrome 14.
Steve Dennis took Yiying Lu's famous Twitter fail whale to an all-new level when he recreated an animated version using pure CSS methods. This CSS3 animation also stands up surprisingly well in Internet Explorer 6! How about that?
13. 3D Clouds
NOTE: Works on Firefox (faster if Nightly), Chrome and Safari.
The Cursor Monster is a little CSS3/JS toy that's very simple, but a joy to play with. Made by Simurai, you basically feed it your cursor - try it, and you'll fall in love with this cute beastie!
15. Movie posters
These movie posters, made by Marco Kuiper, are a great example of pretty powerful CSS3 animation and 3D effects. The perspective, transform and transition properties have been used to create a 3D animation effect when you hover over the movie posters.
NOTE: This demo only works on WebKit-based browsers, which include Safari and Chrome. Alternatively, you can watch it on the YouTube video above.
- John Galantini is a freelance web developer based in Hampshire whose clients include Sky, Vodafone, Sapient Nitro and most recetly, Burberry. He specialises in responsive, front-end development, using HTML5, CSS3 and a little bit of jQuery.
- Aaron Kitney is a freelance graphic designer and art director based in London and Vancouver. He specialises in branding, identity, web design, publication design, album covers, packaging and book design.
If you've seen any more great examples of CSS3 experiments, then please give them a mention in the comments below!