Animation on the web with CSS3

Written by Rick Powell on 31st March 2014

(Last updated 30th March 2020)

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.


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

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
4.0 -webkit-
10.0 16.0
4.0 -moz-
3.1 -webkit-
10.5 -o-


  • 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


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 Design, User Experience by Rick Powell