CSS transition, through a negative top/left absolute position

Problem

http://jsfiddle.net/KgcM9/1/

I'd like to mouse over the <header> and the image transitions out through the top of the screen, and then reappears from the left of the screen back to the original position.

The problems with above fiddle are that if the mouse exits the <header>, the transition halts and the image returns from the top of the screen.

Also the transition moves the image first to x: -300, y: 400, so that it isn't visible, then it moves it x: 700, y: -1700 which is a complete hack so that it appears to be entering in from the bottom left corner.. any better ways to do this with CSS?

Problem courtesy of: StuR

Solution

Not sure if this could help: http://jsfiddle.net/JyPXR/2/ Add overflow hidden and play with left/top coordinates.

Solution courtesy of: jasssonpet

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.