20 stunning examples of CSS3 animation

Here are some of the best experiments and live examples of CSS3 animation to inspire you.

CSS3 properties opened a multitude of new doors to web designers and developers, making it possible to create animations and interactivity entirely in CSS markup, without going near Flash, Silverlight or After Effects. Everything you see below has been created using CSS3, SVG and JavaScript. Enjoy!

01. Type Terms

An animated cheatsheet for type

Type Terms is an animated cheatsheet created by the team at Supremo, a web design agency in Manchester. After doing some research, they found that most existing online information about typographic terminology used simple, static images. The team was looking for a reason to experiment with SVG and CSS animation, and this was the perfect opportunity.

"I decided to create something that was more visually engaging, which would help new designers learn all the key typographic terms in an instant," says designer Dan Heywood.

The team emphasise the importance of designers having a good grasp on typography. For those learning the rules for the first time, or for experienced designers needing a refresher, this cheatsheet is both educational and a delight to explore. The content is focused, the information is clear, and the animations are silky-smooth. Take a look and impress your designer friends with your typography vocabulary.

02. Waaark 

Mouse over the boundaries for a fun animation

Every interaction on Waaark’s site reveals an incredible attention to detail. Art director Jimmy Raheriarisoa and frontend developer Antoine Wodniack, the individuals who make up the French studio, have thought through everything. They have planned how scenes transition from one page to another, how text fades in a certain way, and how complex SVG graphics animate in. 

Everything is brought to life while maintaining performance and accessibility. The pair have added keyboard shortcuts and swiping gestures to make the experience better for people with a wide range of motor abilities. 

When asked about their newly released portfolio site, Wodniack explained that collaboration was key: "With the web becoming more and more creative, it’s becoming vital to assemble a creative duo between a developer and a designer. Developers always need new challenges to blossom, and designers need solutions to make their ideas possible."

03. Greenwich Library

This site uses animation effects to create the illusion of drawing elements while the user scrolls

Public service websites don’t have a great record of being beautiful or easy to use. Luckily, that trend is beginning to fade away, and Greenwich Library’s website is the latest to adopt a modern new look.

When creating the site, the visual design came secondary, however – as a public service, usability comes first and anything else is icing on the cake. The redesign is the result of two years’ worth of research, user testing and design.

In a statement, library director Barbara Ormerod-Glynn explained that the site update was vital because it meant the library could provide its services 24/7. It also addressed issues people were having when trying to find what they needed in a sea of content.

One of our favourite parts is the illusion of drawing elements while the user scrolls. This is a trick many developers create explicitly with SVG, but the simple combination of CSS transformations and layering elements here creates just as interesting an effect as a more complex SVG line drawing. The colour-coded navigational elements also add personality without having to splash colour over every element.

04. 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.

05. 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.

06. 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:

07. CSS Creatures

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!

08. AT-AT Walker from Star Wars

CSS3 animation AT AT Walker

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.

09. 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.

10. 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!

11. Animated Buttons

CSS3 animation 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 .

12. Original Hover Effects

CSS3 animation 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.

13. The Man from Hollywood

CSS3 animation 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+".

14. Animated Google Doodle

CSS3 animation 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.

15. Interactive album covers

CSS3 animation 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.

16. Scrolling Coke Can

CSS3 animation 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!).

17. Animated 3D Super Mario Icon

CSS3 animation Animated 3D Super Mario

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.

18. Animated Fail Whale

CSS3 animation 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?

19. 3D Clouds

CSS3 animation 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.

20. Movie posters

CSS animations 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.

Contributions: John Galantiniand the Creative Bloq staff