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.

Hover CSS

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.

Write a Reply or Comment

Your email address will not be published. Required fields are marked *