Animated Sprites with CSS3 Transitions

The four boxes below are using a combination of CSS sprites and CSS3 transitions to achieve an animated rollover effect without using JavaScript.

To see the animations, hover over any of the four boxes. These effects are visible in supporting browsers (Chrome, Safari, Firefox 3.7; Opera 10.5 does support CSS3 transitions, but I couldn't get it to work for the background-position property). Nonsupporting browsers will see a normal CSS sprite rollover. (Go back to the Article.)

Icons by Icon Finder