CSS3 translate out of screen

Question

For a number of projects now I have had elements on the page which I want to translate out of the screen area (have them fly out of the document). In proper code this should be

Answer 1

I know this is not exactly what you were asking but...

Would you consider using CSS animations with Greensock's Animation Platform? It is terribly fast (it claims it's 20 times faster than jQuery), you can see the speed test here: http://www.greensock.com/js/speed.html

It would make your code nicer I believe, and instead of trying to hack CSS animations you could focus on more important stuff.

I have created a JSFiddle here: http://jsfiddle.net/ATcpw/4/

Both CSS and possible JS look simpler:

document.querySelector("button").addEventListener("click",function(){
    var toAnimate = document.querySelector(".block");
    TweenMax.to(toAnimate, 2, {y: -window.innerHeight});
});

CSS:

.block{
    position:absolute;
    bottom:10px;
    right:10px;
    left:10px;
    height:100px;
    background-image: url(http://lorempixel.com/800/100);
}