CSS3 translate out of screen
css, html, javascript
Solution
What I did is use the `vh` (view height) unit. It's always relative to the screen size, not the element itself:
/* moves the element one screen height down */
translateY(calc(100vh))
So if you know the position of the element in the screen (say `top:320px`), you can move it exactly off the screen:
/* moves the element down exactly off the bottom of the screen */
translateY(calc(100vh - 320px))
Problem
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 possible just by adding a class to the relevant element after which the css would handle the rest. The problem lies in the fact that if for example ``` .block.hide{ -webkit-transform:translateY(-10000px); } ``` is used the element will first of all fly out of the screen unnecessarily far and with an unnecessarily high speed. And purely from an aesthetic point of view there's a lot left to be desired (Theoretically speaking for example a screen with a height of 10000px could be introduced one day in the future). (Update) The problem why percentages can't be used is that 100% is relative to the element itself, rather than to the parent element/screen size. And containing the element in a full-sized parent would be possible, but would create a mess with click events. And after a few answers, allow me to point out that I am talking about translations, not about `position:absolute` css3 transitions (which are all fine, but once you get enough of them they stop being fun). What aesthetically pleasing solutions to allow an element to translate out of a screen in a fixed amount of time can you guys think of? Example code can be found in this jsfiddle demonstrating the basic concept. http://jsfiddle.net/ATcpw/ (see my own answer below for a bit more information)