Animation on the web with CSS3

Written by Rick Powell on 31st March 2014

(Last updated 15th July 2016)

No comments
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. 

Liqid Light Examples

Examples from around the web

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 by Rick Powell

Comments

No comments have yet been posted, be the first to comment by using the form below:

Post a comment

*
*

Sign up to the Liquid Light newsletter

Subscribe to our Newsletter and stay up to date with all things web related. It's crammed full of useful articles, tips and knowledge, invaluable if you have a website or are starting a new web project.