Web technologies are always improving, and at an enormous rate. The web is moving in a way that makes it possible to do things natively in the web browser where one once had to rely only on external scripts or images. This is a very exciting concept to modern web designers and front-end developers. Things like CSS3 give web browsers support for gradients, rounded corners, drop shadows, and other design elements previously only achieved by using images. Modern browsers also include support for transitions and animations using only CSS.
Check out this cool little nugget, made by Dan Eden, called animate.css (make sure you view the demo page in Safari, Chrome, or Firefox). Dan has compiled a great selection of animations using only CSS3 transitions for you to use. Simply add the animate.css stylesheet to your project and add a class to your element. It’s that easy to create awesome animations that use native web browser technologies.
One of the main benefits of using CSS transitions and animations over things like jQuery and other Javascript libraries is better performance. This is due to the fact that they are native to the web browser and can take advantage of hardware acceleration – the use of the computer’s hardware to perform functions – whereas external scripts cannot. In addition to this performance boost, CSS animations will generally look better since they can use hardware acceleration.
However, don’t get too crazy using only CSS animations. There is one major drawback and that is cross-browser compatibility. Currently the only browsers that support this technology are Chrome, Safari, and Firefox. Microsoft has promised support for CSS transitions in Internet Explorer 10, so it will one day be a reliable cross-browser technology – just not right now. It’s important to provide a fallback using a script like jQuery for those browsers which don’t support CSS transitions.
