title: CSS display none and opacity animation with keyframes not working
body: <p>I have a very basic piece of HTML with the objective of animating from <code>display: none;</code> to <code>display: block</code> with opacity changing from 0 to 1. </p>
  
  <p>I'm using Chrome browser, which uses the <code>-webkit</code> prefixes as preference and did a <code>-webkit-keyframes</code> transition set to make the animation possible. However, it does not work and just changes the <code>display</code> without fading.</p>
  
  <p>I have a JSFiddle <a href="http://jsfiddle.net/5g4yLcym/" rel="noreferrer">here</a>.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              #myDiv
                  {
                  display: none;
                  opacity: 0;
                  padding: 5px;
                  color: #600;
                  background-color: #CEC;
                  -webkit-transition: 350ms display-none-transition;
                  }
  
              #parent:hover&gt;#myDiv
                  {
                  opacity: 1;
                  display: block;
                  }
  
              #parent
                  {
                  background-color: #000;
                  color: #FFF;
                  width: 500px;
                  height: 500px;
                  padding: 5px;
                  }
  
              @-webkit-keyframes display-none-transition
                  {
                  0% {
                      display: none; 
                      opacity: 0;
                      }
  
                  1% 
                      {
                      display: block; 
                      opacity: 0;
                      }
  
                  100% 
                      {
                      display: block; 
                      opacity: 1;
                      }
                  }
          &lt;/style&gt;
          &lt;body&gt;
              &lt;div id="parent"&gt;
                  Hover on me...
                  &lt;div id="myDiv"&gt;
                      Hello!
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/body&gt;
      &lt;/head&gt;
  &lt;/html&gt;
  </code></pre>