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

This is simple add the following to your div

.myDiv {
    -webkit-transition-property: left;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-delay: initial
}

then change the "left" property of it either by adding an additional class or by jQuery

This will animate it along the x-axis

Note: you can change the -webkit-transition-property to any property you want and this will animate it

Answer 2

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);
}