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

If you wrap the .block div with a container:

   


Click

you could expand and then, translate the container itself after the click event

document.querySelector("button").addEventListener("click", function () {
   document.querySelector(".container").classList.add("hide");
});

with this style

.block {
    position:absolute;
    bottom:10px;
    right:10px;
    left:10px;
    height:100px;
    background:gray;
}

.container {
    -webkit-transition: -webkit-transform ease-in-out 1s;
    -webkit-transform-origin: top;
    -webkit-transition-delay: 0.1s; /* Needed to calculate the vertical area to shift with translateY */
}

.container.hide {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    /* background:#f00; /* Uncomment to see the affected area */ 
    -webkit-transform: translateY(-110%);
}

In this way, it is possible to apply a correct translationY percentage ( a little more than 100%, just to have it out of the way ) and mantaining the button clickable.

You could see a working example here : http://jsfiddle.net/MG7bK/

P.S: I noticed that the transition delay is needed only for the transitionY property, otherwise the animation would fail, probably because it tries to start before having an actual value for the height. It could be omitted if you use the horizontal disappearing, with translateX.