You can do a lot with css3 transitions and I'm not going to get into that here. But I am going to show you a simple line of css you can start using now to add a nice smooth animation to your :hover effects.

Now this can be altered to your needs, I'm using 0.2 seconds of transition and the "ease" effect. You can pop over to w3c for all the gritty on property. But in short just add this to the css of any link (or other element you have associated a :hover with) and BAM. Nice smooth animation in everything except for IE. (IE10 will support it but that's not quite out as of this writing)

The css3 transition code

-webkit-transition: all .2s ease;-moz-transition: all .2s ease;-o-transition: all .2s ease;-ms-transition: all .2s ease;transition: all .2s ease;

css3 transitions working example

Here is a working comparison example over at jsbin.