Animation on the web with CSS3

Animation is a new CSS3 property which can be applied to HTML tags such as div, h1 or a span. With flash now redundant from the web, CSS animations are a great alternative to spice up your designs. For example you could animate the hover states of buttons using the transition feature or build a more complex animation.

CSS3 is currently supported by modern browsers including Safari, Chrome and Firefox. Some older browsers do not support these new features; any browser that does not support it will simply ignore the animation so having an alternative solution to the animation is a good idea as backup. This could be as simple as showing a static image on old browsers instead of the animation. However, we dropeed support for IE8 at the beginning of 2016 - so all of the browsers we build for support transitions.

Examples

Here is a list of examples demonstrating what can be done with CSS3. There are some pretty amazing examples that should get you excited about trying it out for yourself. 

Liquid Light Examples

• WNY Projects - hovering over the projects alters the colour and scale of the items (check out the hover on the logo for one of our subtle favourites!)
• ARII Regions - on page load (and hover), the individual maps 'bob'
• Example routing boxes
• Example button effects

Examples from around the web

• OSX Style dock
• Vinyl sliding out of the sleeve
• CSS: Animation Using CSS Transforms
• Elastic Image Thumbnails
• Veritcal CSS menu
• Fish-eye menu
• Accordian
• Border animation
• Neon Glow
• 3D page turning effect

Browser support

Most modern browsers support CSS3, these are currently the browsers that support it.

Chrome	Internet Explorer / Edge	Firefox	Safari	Opera
26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

Pros

• No need to use javascript or flash
• Increased productivity
• Easy to maintain
• Smaller file sizes meaning quicker to load times
• Fewer uses of images or flash files meaning less number of HTTP requests
• Better SEO with CSS3 compared to flash image files
• Real text will give you a better SEO ranking compared to using images
• Real text can be selected, copied and searched
• Quickly editable

Cons

There aren't really many disadvantages using CSS3 as it is the new standard for web design. However there are still a few minor points to consider.

• CSS3 is not compatible with all browsers yet, especially older versions.  
• Many properties will need prefixes like -moz- and -webkit- as they have not yet reached a mature syntax.

There does not appear to be any major downsides to using CSS animations in your web pages, as long as you have a fallback for older browsers. It is a great tool to improve the look and feel of your website, just remember not to over do it.

This article was posted in Tools, Design, Responsive, UX by Rick Powell