Webkit CSS: fade in and out

gistfile1.md

I was looking for a CSS-only solution to fade a page overlay in and out. Obviously this should do the trick:

#loadingIndicator {position: absolute, z-index: 1;  opacity: 0; -webkit-transition: opacity 2s; }
body.loading #appLoadingIndicator { opacity: 0.8; }

However, this leaves an invisible layer on top of everything, which catches all clicks or other mouse events. This problem seems to have come up more often (http://stackoverflow.com/questions/4178567/webkit-transition-with-display). The solution is to use a transition on 2 properties, and move the layer out of the way after it has faded out:

#loadingIndicator {position: absolute, z-index: 1;  top: -1000px; opacity: 0.2; -webkit-transition-property: opacity, top; -webkit-transition-duration: 2s,0; -webkit-transition-delay: 0, 2s; }
body.loading #appLoadingIndicator { opacity: 0.8; top: 0; -webkit-transition-delay: 0,0;}

Because the "top" property is transitioned with a delay of 2s and a duration of 0, the layer jumps out of the way the moment the opacity reaches 0. However we need to make sure that on the fade in, this delay is not there, hence the extra -webkit-transition-delay in the body.loading #appLoadingIndicator.

Works like a charm (for me, on chrome...).

In stead of "top", one could also choose to use "height"