You no longer need Flash to create web-based animations and interactivity. Here are some 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.
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).
01. Solar system
Click here for Live Demo
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 bestexamples
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 andNicolas 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 Vazquezand Tim Sabat to help designers and developers share
and fork their work.
02. Periodic table
Click here for Live Demo
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.jsJavaScript 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:
03. CSS Creatures
Click here for Live Demo
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 developerBennett 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!
04. Animated Buttons
Click here for Live Demo
This series of demo, 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 .
05. Original Hover Effects
Click here for Live Demo
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.
06. Animated Google Doodle
Click here for Live Demo
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.
07. Interactive album covers
Click here for Live Demo
Not only have @MrDenav 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.
08. Animated Fail Whale
Click here for Live Demo
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?
09. 3D Clouds
Click here for Live Demo
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 byJaume 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.10. 3D Animation using Pure CSS3
Click here for Live Demo
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.
No comments:
Post a Comment