In my last article, 4 simple CSS3 animation tutorials I had shown you some simple tutorials using CSS3 transforms to create some basic animations. This time I will be showing you some of the top CSS3 examples and animations. You will be able to truly see the capabilities that come with CSS3 and some really awesome animations built by extremely talented web developers.
To view these demos click on the image links. Most of these animations are built using webkits so it is preferred if you view them in the latest versions of Safari or Chrome.
1. Turning Coke Can
When I first saw this animation, I thought it was pretty neat and then I realized that the whole can was built using CSS and that just blew my mind! Check it out for yourself (make sure you scroll horizontally).
2. Rotating Cube Using The Arrow Keys
This awesome rotating cube is built using CSS and allows you to move it using your arrow keys.
3. CSS3 3D Meninas
This CSS3 animation is a classic painting which turns 3D as you hover over using the pseudo/parallax effect. Built using pure CSS and HTMl.
4. The MAC OS Dock
This is a cool CSS3 example of the MAC OS dock. Works in Safari 4 and Chrome 5
5. Text Shadow Box
Check out this awesome Text Shadow property effect, hover over the text to get a neat shadow effect.
This is a jQuery and CSS3 Disk Jockey set. You can control the speed of each disc with your mouse or the buttons. Take a look at this inspiring CSS3 demo.
This is a CSS3 example using transitions and transforms to create a nice rotating photo gallery.
Pure CSS3 AT-AT walker. For the star wars fans lol.
Another one for the Star Wars fans, the opening text using CSS and HTML for the Star Wars trilogy.
A great animation made by the same developer who created the cube controlled by the arrow keys. This time a sphere that can be moved with a mouse click or arrow keys.
Check out this rotating 3D city built using CSS3 animations.
Have a look at this holographic box built using CSS3. Hover your mouse over the box to get a cool 3D effect.
These are a few CSS3 scrolling effects. Scroll through the examples to reveal the neat effect used with CSS3.
This is truly an amazing animation, built using CSS a little HTML and some JavaScript. You can adjust the image of the animation, the speed, scale and background.
This is unreal how amazing this is, built using HTML and CSS. One of my favorite animations, must of took some time. Press watch to view the video.
This is another CSS3 website, but the part I want to showcase is the CSS animation that runs when you navigate to different pages on the website. Pretty awesome CSS animations.
This is a 3D box that moves with your mouse. Make sure you type in the search box to see the next part of the effect.
CSS 3D Earth, built with CSS3 and some Javascript. Must see animation.
A Rotating DOM Tree.
Last but not least we have a 3D Bouncing Ball using CSS3.
Now you have 20 of my favorite CSS3 examples that are truly amazing, go ahead and share them with your friends!
Also, please subscribe to our blog newsletter if you wish to stay updated with the latest web trends and resources.
