10 impressive examples of CSS3 animation

[Rss Bot 1]

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. Below we've rounded up some of the best CSS3 animation examples around – including standalone effects and sites.

01. One Shared House

Anton & Irene's web documentary uses CSS Transformations

One Shared House is a web documentary profiling UX designer Irene Pereyra's experiences growing up in a feminist commune in 1970s Amsterdam. From the moment you arrive, you're not alone: your cursor movements are followed.

Instead of relying on trite scrolling techniques, Pereyra and partner-in-design Anton Repponen drew inspiration from the early-90s game 'Where in the World is Carmen Sandiego?' and made use of the bottom screen to subtly expose exploratory content, offering you the ability to define your own level of involvement with the story.

Interactions combine with storytelling to deliver a mesmerising, novel experience. Pereyra and Repponen's boldness in persevering through two years of self-funded and self-initiated work is important: "It enables us to experiment with disciplines and techniques for which there is typically no space in client projects," says Pereyra.

02. Type Terms

An animated cheatsheet for type

Type Terms is an animated cheatsheet created by 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. 

03. 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."

04. 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. Built by Barcelona-based web designer Ricardo Cabello – best known within the community as 'Mr Doob' – this 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. Cabello has also posted this video of how the demo runs on an iPad 2:

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

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.

07. GT America

Designer Josh Schaub's animations bring this microsite to life

Grilli Type, a Swiss type foundry, has struck gold with the release of its new font GT-America, and this "fun, funny, fresh microsite that takes the idea of a type specimen to the next level" (in the words of graphic designer and critic Michael Bierut). Every detail on the site fits together to tell the story of the font.

GT-America is named after its country of inspiration, the United States. There's so much play going on here, with more than 40 quirky animations by designer Josh Schaub. You can even interact with some of them to bring the illustrations to life. We like the use of animation and video to showcase the incredible versatility in the font: width, stroke, kerning, use. Everything is a storytelling moment, a teaching moment and a learning moment in one.

08. Caaaaaaaat

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!

09. 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, but Greenwich Library’s website is an exception to the rule. The redesign is the result of two years’ worth of research, user testing and design.

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.

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

Read more:

• Understand the 12 principles of animation
• Create storyboards for web animations
• How to use animation in mobile apps

View the full article