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.
The inspirational experiments in CSS3 animation listed here show just what CSS is now capable of - and while some utilise the odd bit of JavaScript, no plug-ins are necessary. Be warned, though: because they were specifically created as experiments, most of these animations will only work in the very latest versions of web browsers (and some will also only work in specific browsers).
To see all our CSS3 posts, click here
01. Solar system
The animation is super-smooth - as long as you're using an updated browser, that is
You don't have to be a web design expert to appreciate this animated model of the solar system, another one of the best examples of CSS we've found. Created by Julian Garnier, it shows the eight planets orbiting the sun in 3D (yes, you read that right - despite what you got told at school, boffins recently decided that Pluto is no longer officially a planet).
The demo was inspired by similar projects by Alex Giron and Nicolas Gallager. It's one of a number of HTML, CSS and JavaScript projects to have been uploaded to CodePen, a new app created by CSS-Tricks creator Chris Coyier, Alex Vazquez and Tim Sabat to help designers and developers share and fork their work.
02. 3D page flip
This 3D page turn flips there and back again
Created by web designer and developer Fabrizio Bianchi, this fantastic 3D bending page flip effect is a CSS-only experiment. Be aware that it'll only work on browsers that support transform-style: preserve-3D.
03. Periodic table
At the start of the demo, the disparate elements gently fly towards each other
The periodic table of elements is a popular subject for designers to showcase new web technologies, and this latest CSS3 experiment is the most fun yet. Built by Barcelona-based web designer Ricardo Cabello - best known within the community as 'Mr Doob' - the demo starts with the animated elements hurtling through space towards each other to form a table.
You're then given the option to rotate them in three dimensions by dragging on your mouse. You can also switch between 'Table', 'Sphere', 'Helix', and 'Grid' views by clicking the buttons at the bottom of the page.
Cabello created the experiment to see if he could use his three.js JavaScript library to replicate the effects used in a demo for the game engine famo.us. You can find full details on his Google+ page. In case you don't have access to a modern browser, Cabello has also posted this video of how the demo runs on an iPad 2:
04. CSS Creatures
What will your CSS creature look like?
We all know that working in the design industry can sometimes become monotonous. So, take some time out from your busy schedule and have some creative fun with this cute little CSS project from Pittsburgh-based web designer and developer Bennett Feely.
CSS Creatures allows the user to design, create and animate their very own web-based friend. Like the sound of that? All you have to do is send a tweet to @CSSCreatures with your preferred colour, personality and features. Your CSS creature then appears on the site in under 25 seconds!
05. Bonfire Night safety infographic
The web infographic is aimed at kids in the UK attending Bonfire Night on Nov 5th
With Bonfire Night approaching in the UK, Col Morley and Igor Krestov of Blue Claw decided to put their CSS skills to work creating this fire safety infographic aimed at school-age children.
When viewed in a suitable browser, some elements of the infographic will animate. Rather than aiming at supersmooth, in-your-face visual effects, the flickering of the flames and the sparkling of the sparklers is simple, subtle - and, we think, all the more effective for it.
Inspired by Firefox's homepage Olympic flame over the summer of 2012, the infographic was created using layered graphics and CSS3 to aid in the process of transition of scale, movement and speed, explains Morley. "The bonfire is made up of several layered 'fire' shapes then playing around with key frames enabled stretching, opacity and by adding a warm glow renders a realistic flame effect.
"The spark that appears throughout the page was created using a similar technique. Three images were used to pulsate at different rates of scale, similar effect to how we animated the 'fearful cat'. The movement of the eyes on the hot dog was produced by mouse tracking code adding further interest to those who spotted that.
"The styling of the traditional blackboard theme gives the piece the right level and tone for the audience and enabled us to experiment with textures and fonts."
06. AT-AT Walker from Star Wars
AT-AT Walker by Anthony Calzadilla
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.
07. Chessboard Vacuum
We can stop looking at this any time we want. Any time. Easy.
You know those optical illusions you get that appear to be moving, even though they're static images? This isn't one of those. It's a mesmeric piece of CSS by Ana Tudor, in which a sort of chessboard slowly spins and mutates and rebuilds and spins and mutates and oh God we can't stop looking at it.
08. Futurama Animation
Futurama by Stu Nicholls
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.
09. Responsive cat
The cat stretches to the width of the browser window
Japanese web designer and interactive director Masayuki Kido, aka Roxik, has created this animated kitty which stretches across the length of the browser window, and resizes accordingly as you reduce the window's width. Make it narrow enough and the word changes with hilarious consequences. And the fun doesn't end there - but we don't want to spoilt it, so go have a play now!
10. Animated Buttons
Animated Buttons demo
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 .
11. Original Hover Effects
Original Hover Effects demo by Alessio Atzeni
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.
12. Mad-Manimation
Mad-Manimation by Anthony Calzadilla, Geri Coady and Andy Clarke
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.
13. Safari Technology Demos
Safari Technology Demos lets you gaze around the Apple Store
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.
14. The Man from Hollywood
Man from Hollywood by Tyler Gaw
This kinetic type experiment made by Tyler Gaw uses advanced CSS3 selectors and CSS3 transitions, as well as a little JavaScript where necessary. NOTE: This demo only works on the following browsers: Chrome, Safari, and "kinda-sorta on Firefox 4+".
15. Animated Google Doodle
Google Doodle by CSS Creations
Inspired by Google's JavaScript-powered Doodle marking Eadweard J Muybridge's 182nd birthday, the guys at CSS Creations set out to achieve a pure CSS alternative using transitions against a background-image sprite. As a result, the CSS3 animation behaves almost exactly as the JavaScript original.
16. Interactive album covers
Album covers by bluedashed.com
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.
17. Scrolling Coke Can
Coke Can by Roman Cortes
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!).
18. Animated 3D Super Mario Icon
Animated 3D Super Mario by Andreas Jacob
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.
19. Animated Fail Whale
Fail Whale by Steve Dennis
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?
20. 3D Clouds
3D Clouds by Jaume Sánchez
This experiment to create fluffy clouds using CSS3 3D Transforms and a bit of JavaScript is simply amazing. You move the mouse to rotate around and mouse wheel to zoom in and out, and hit space to generate a new cloud. It was made by Jaume Sánchez and inspired by Mr.Doob's WebGL clouds and Mark J. Harris' Real-Time Cloud Rendering for Games. For those wanting to try this CSS3 animation technique for themselves, there is also a tutorial worth checking out.
NOTE: Works on Firefox (faster if Nightly), Chrome and Safari.
21. The Cursor Monster
Cursor monster by Simurai
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!
22. Movie posters
Movie posters by Marco Kuiper
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.
Words: John Galantini, Aaron Kitney and the Creative Bloq staff
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.
Like this? Read these:
If you've seen any more great examples of CSS3 experiments, then please give them a mention in the comments below!
Every scene was developed with the audience's view in mind
It was very important to James that the audience forget that these two characters were CG," Hibbert comments
Click the image to enlarge
Click the image to enlarge
Click the image to enlarge
Artist David Klein used bright colours and abstract styles in many of his poster designs for TWA
Original French advertising by artist Jean D'ylen
The work of fashion illustrator Rene Gruau made him a favourite in the haute couture world
This is just one of 75 poster designs Edward Penfield illustrated for Harper's Magazine during the late 1800s
Kosel's distinctive travel posters are instantly recogniseable as the Austrian artist's work
Belgian posterist Henri Privat-Livemont created this beautiful Art Nouveau print for Absinthe in 1896
Poster artist Leonetto Cappiello created nearly 1,000 pieces during the early 1900s
This beautiful design was created by artist Michael Turner for the 1975 Monaco Grand Prix
This Space-Station X-1 silk-screen poster graced the walls of Disneyland in the late 1950s
Artist Jean Dommergue created this beautiful poster, the first for Perrier to feature the Perrier Girl
A M Cassandre's image of ocean liner Normandie has become an iconic image of 20th Century Art Deco design
British designer Tom Purvis created many beautiful poster designs for clothing store Austin Reed during the 1930s
Peter Ewart's created 24 gorgeous poster designs during his 17-year working relationship with Canadian Pacific
Austrian designer Joseph Binder created this beautiful stylised version of a better world of tomorrow
French painter Henri Toulouse-Lautrec uses simple outlines and solid blocks of colour in this eye-catching design
As well as his famous TWA series, David Klein also created various posters for his local theatre in Brooklyn
This is just one of hundreds of poster designs from famous French artist Jules Cheret
Graphic artist Bernard Villemot is most known for his humorous poster designs for soft drink Orangina
French artist Toulouse-Lautrec captured Moulin Rouge characters perfectly in this poster design
Italian artist Leonetto Cappiello drew bold figures popping out of black backgrounds for many of the campaigns he worked on, including this one for Campari
Tintin and Snowy share a refreshing bottle of orange in this vibrant poster design by Raymond Savignac