Please take a look a this codepen and help if you can!
Sorry, but that link isn’t working. And sorry, it’s time for bed.
Here’s some stuff on CSS animations. I didn’t use “font awesome” classes and instead cobbled together my own CSS - but probably the reason why you get a smooth transition one way but a stark one back will come down to the presence (or absence) of the “transition” property in the CSS somewhere (maybe look at the base class to begin with?)
This is a really handy resource for DIY CSS: http://www.htmldog.com/guides/css/