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