display:none + transitions

HTML

<div>Hello</div>
<h1>Hover me</h1>

CSS

html, body { height: 100%; padding:0; font: 20px/40px sans-serif; }
h1 { padding: 20px; }
div {
    width: 100%; background: pink; padding: 20px;
    
    display: none;
}

body:hover div {
    display: block;
    
    -webkit-animation: slide-down .3s ease-out;
    -moz-animation: slide-down .3s ease-out;
}

@-webkit-keyframes slide-left {
      0% { opacity: 0; -webkit-transform: translateY(-100%); }   
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes slide-left {
      0% { opacity: 0; -moz-transform: translateY(-100%); }   
    100% { opacity: 1; -moz-transform: translateY(0); }
}

JavaScript

// Mixing display:none with other transitions

// Problem: You want an element to be hidden but also don't take up any space. You set display:none;. Now, when you wanna show it and set it to display:block;, it instantly appears. Great, now let's add another transition, like fadein or slide down.. oohh.. snap! Doesn't work. 

// You could add a class with a delayed JS call, or.. 

// If your enviroment allows to rely on keyframe animations: Put all the other transitions into a keyframe animation and it works! \o/

// Found here: http://snook.ca/archives/html_and_css/css3-animation-proposal#c68482