So it has been a little while ey! But here is a new blog post for you and a lightly different approach for this one. Instead of my usual tutorial and information style I am going for the pure inspiration approach.
Here are some amazing CSS3 animations to get you drooling and inspired to go and create some of your own pieces. Some are tutorials as well so you are not left with just wonder!
Enjoy! and get creating!
Animated 3D Helix
First one in the list is an incredible animation made by Marcofolio.net, using CSS3 3D transforms. The animation looks like magic itself, but you can actually learn to create the similar effect with the tutorial in the article!
Animated Buttons
A must-see for any web designer, as the demo not only shows the possibilities of CSS3 animation, but also provides very cool and practical button effects for inspiration!
Mad-Manimation
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 byAnthony Calzadilla, Geri Coady and Andy Clarke, and if you work in web design, you’ll know of these familiar names and faces, if you don’t already get following thier twitter feeds and blogs. 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 below.
Animation Menus
Trying to spice up your animation menus to make them look really cool and creative? This demo is for you.
AT-AT Walker
An inspiring animation demo showing the potential of CSS3 on animating an unit with body parts.
Battlefield CSS3
Battlefield CSS3 with lots of explosions and gunshots! Coooolll!
Big Deal
It’s the smooth and nice animation that made this demo a big deal.
Can Haz Ur Cursor?
“Hi, I’m the Cursor Monster. My papa has a message for you: ‘Please, don’t use cursor:none, except if you create a cursor eating monster’.”
CSS Dock
A sexy experiment mimicking the Mac OS X’s dock, and it’s really smooth.
CSS3 Man
Look out, here comes the CSS3 man! Perfect example to showcase the true potential of CSS3 animation. Plus it’s Spider Man that makes it just that little bit more awesome.
Dribbble Ball Bouncing
With the little use of graphic tricks comes a nice and amusing CSS3 animation.
Dulla
Dulla pretty much shows one of the most common techniques used to create 2D platformer game, which is now also possible with CSS3.
Frame by Frame Animation
Frame by frame animation with CSS3? No problem!
Graph Animation
A simple but powerful animation for you to show/explain the graph in your site, plus you can learn to make it!
High
A mysterious music animation which displays images from Google Search dynamically in real-time, and the displaying images are based on the song lyrics.
Hover Effects
The future of the hover effect comes with CSS3. Sleek and promising. I see these getting used more and more in the future so make sure you check these out.
I Am Joseph Barrett
CSS3 integrated into the social media icons of the portfolio site. It’s not only fun but also showing the creativity of the designer.
Infinite Zoom
Smooth animation, also a nice way to show off your portfolio. The total zoom for the 26 images is 67108864:1.
Kinect and CSS3
“14 body joints are tracked and converted into a short CSS animation using Xbox Kinect. The body data is brought into the browser where is parsed and converted into CSS animations with animatable.com.”
Matrix
Want to be as cool as Matrix? With the CSS3 you’re able to make it.
Morphing Cubes
Experimental demo exploring the CSS3 using 3D transforms, animations and transitions. The interesting part here is you can still select the text on the elements, even when they are still rotating.
Our Solar System
You don’t need expensive standalone software to help students explore solar system anymore.
Duff Roll
“Mmmmmm….Homer would love the never ending supply of beer.”
Poster Circle
A simple yet interesting example on showing you how to use CSS transformation and animation to achieve interesting effect.
Reverend Danger
Who can resist a website with really cute characters and amusing animations?
Rofox
Seamless and fun animation, get the source code to try on your own!
Shaun The Sheep
“Watch Shaun and his friends’ antics in clips from ‘An Ill Wind’, ‘Snowed In’, ‘The Big Chase’, and ‘Twos Company’ through an interactive experiment created with hardware-accelerated HTML5 video, 3D CSS Transforms, and WebM.”
Space
Perhaps space is the final limit for CSS3.
Space CaCSS
Create magical effect like this isn’t really hard with CSS3, as there are mainly just repeating-radial-gradient and background-size involved. Variations are possible with reasonable amount of tweaks.
Star Wars Crawl
Star Wars opening’s crawl effect! Just as epic as CSS3.
The Expressive Web
The expressive web not only introduces you about the CSS3 and its browser support, reference and documentation, but also showcasing a mind-blowing CSS3 animation on its web page.
The Letter-Heads
Using types to create a shadow that looks like human’s face, who would have thought it would be possible with CSS3?
The Man From Hollywood
Ever saw those attractive animations using just pure typography? Well, you can do it with CSS3 too.
Safari Technology Demos
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.
The Planetarium
Simply epic demo on exploring the planetarium with details. SVG, JavaScript, HTML5, CSS3, fonts and types are involved.
Type Rains
“The forecast for today, assuming you’re using a modern browser, is cloudy, with a 100% chance of Georgia showers.”
Typography Effects
Besides button, menu and hover effects, you can also achieve creative typography effects with CSS3. jQuery is also involved in this demo to style the letters of the words.
Walking With Andrew Hoyer
Best of all, you can also learn to walk with Andrew Hoyer in the article!
Wonder Webkit
A wonderful use of CSS3 3D transformations with JavaScript Matrix library. Sounds technical, but the outcome is rockingly cool.
Zoetrope
What else you can’t do with CSS3 when Zoetrope is possible with it?
Animated Google Doodle
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.
Interactive album covers
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.
Scrolling Coke Can
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!).
Animated 3D Super Mario Icon
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.
Animated Fail Whale
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?
3D Clouds
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.
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 below.
