In 2012, CSS3 animations were on the horizon as browsers began to adopt the new syntax. These animations have now become more common as developers continue to push the boundaries of what is possible with HTML and CSS
These will not work in all browsers but should with a newer version of Chrome, Safari or Firefox and many work in IE9+. Hopefully these CSS3 animations and examples will leave you inspired!
CSS3 Animation Using Sprite Sheets
This tutorial shows how to use a sprite sheet of Mario drawings to animate him running and throwing a punch.
W is for Windmill
Here is a fully animated Windmill using only HTML and CSS.
CSS3 Animated Charts
A little more practical, this example creates charts that animate on page load.
CSS Spinning Loader Animation
Here is a nice loading animation using CSS3.
The Opera Logo Rendered in CSS3
Checkout the Opera logo rendered using CSS3 border-radius, background gradient and box-shadow.
CSS3 Rain on Window Animation
This is a very cool effect using only CSS and HTML.
Our Solar System in CSS3
Our solar system fully rendered and animated with CSS3 border-radius, transforms & animations.
CSS1/2 Animated Coca-Cola Can
Okay, I broke the rules of the post, but this is still cool.
CSS3 3D City
How to build an animated 3D City with CSS3.
iOS Icons Rendered using CSS3
A nice set of Apple iOS icons rendered with CSS3 goodness. Do yourself a favor on this one and inspect the elements.
CSS3 Digital Clock
A sweet looking digital clock in CSS3.
CSS3 as Lighting Effects
CSS3 as lighting effects! This demo is created using CSS gradients, masks, box shadows and transforms.
Typography Effects with CSS3 and jQuery
These typography effects are less experimental and more real world ready.
Mac OS X Lion in CSS3
Roar. And JavaScript, but hey, this is cool.
The post 14 Amazing CSS3 Animations and Renderings appeared first on Today in Web Design.