css3 simple animation, when hovering off of the element, it doesn't animate, it just snaps back. How to make it animate smoothly back?
===

http://jsfiddle.net/nicktheandroid/vX7CV/10/

This is a simple example, but for what I need this for, transition will not work, animation needs to be used.

When hovering the element, the animation smoothly animates the element, when hovering off of the element it snaps back to it's original settings without smoothly animating back.

Is there a way to cause it to animate back to it's settings instead of snapping back like it is?

Animate needs to be used for the :hover event, but when hovering off the element, I could use transition, if this would work, I can't get it to work though.