On CSS animation background size: edges become blurry.

Question

When I use the CSS transition so on hover the background size increases with the ease effect the image edges become blurry for a couple of seconds before going back to being smooth, is there any way I can fix this?

CodePen e.g.: http://codepen.io/willlangford/pen/szlcI

Answer 1

1. Use EM over PX
2. Use Icon Fonts - checkout http://icomoon.io or http://socicon.com