
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.
Comments
No comments have yet been posted, be the first to comment by using the form below:
Post a comment