CSS3 background image position transition

I want a CSS3 hover effect on my website's logo. Easy, right? Well it works, but not the way I want it to.

Link to my logo

The top half of it is the regular state and the bottom half is the :hover state.

I have the standard CSS for changing the background position on :hover, but the CSS3 transition slides the image up and down with the position. Instead, I want it to simply fade in and out to the new position.

Is this possible when working with one image and two positions or will I have to make two separate images (which isn't happening)?