Introducing CSS3 transitions

With CSS3, we can add an effect that allows you to change theme from one style to another without using Flash animations or JavaScripts. As you know, Flash is not supported on Apple devices, so it is recommended that you don't use it for new projects.

You can use jQuery animations that guarantee full browser support to create simple and nice effects, but with CSS3 you can create the same stuff with less code.

You can use CSS3 transitions with all the modern browsers; Internet Explorer 10, Firefox, Chrome, and Opera support the transition property. You can see a full compatibility table at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions#Browser_compatibility.

Internet Explorer 9 (IE9) and earlier versions do not support the transition property. A best practice to add optional CSS classes, depending on the browser in use, consists of including the JS Modernizr. Modernizr detects the browser being used and appends several classes to the...