CSS animations have been popular for some time now and you will find theme all over the web. On occasion I also use these nifty little snippets. A word of warning though, these animations can very easily be overused and your site ends up looking like a Christmas tree.
When using CSS animations please remember:
- not to overuse the animations, you do not want your page moving around all over the show.
- to make sure that none of the surrounding elements move along with your animation.
- to do cross-browser testing, you could get a few nasty surprises.
Personally I have used CSS animations on my personal sites for a while now. I do not believe in re-inventing the wheel so when I need these things I do not do my own styling, I simply use the Hover CSS library developed by Ian Lunn.
There are three specific animations in this library which I have found very useful. I have added a small demo showing these three animations.
Hover CSS is available for open source/personal use under a MIT license. If you need to use this library for any other purpose you will need to buy a commercial license.
Styling Used In Demo
You might have to edit this styling to suit the rest of the link styles you already have on your site.
Thanks for visiting. I would love to hear how you use CSS animations.