title: How to transition CSS display + opacity properties
body: <p>I have got a problem with a CSS3 animation.</p>
  
  
  
  <pre><code>.child {
      opacity: 0;
      display: none;
  
      -webkit-transition: opacity 0.5s ease-in-out;
      -moz-transition: opacity 0.5s ease-in-out;
      transition: opacity 0.5s ease-in-out;
  }
  
  .parent:hover .child {
      opacity: 0.9;
      display: block;
  }
  </code></pre>
  
  <p>This code only works if I remove the change of <code>display</code>.</p>
  
  <p>I want to change the display just after the hover but the opacity should be changed using the transition.</p>