title: How to fade in a HTML5 dialog?
body: <p>How can I fade in an HTML5 dialog? And by dialog I mean HTML5 <code>&lt;dialog&gt;</code> tag (<a href="http://demo.agektmr.com/dialog/" rel="noreferrer">http://demo.agektmr.com/dialog/</a>).</p>
  
  <p>I tried the following (<a href="http://jsfiddle.net/v6tbW/" rel="noreferrer">http://jsfiddle.net/v6tbW/</a>) but for some reason the transition does not work. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;dialog id="myDialog"&gt;
      Test
  &lt;/dialog&gt;
  
  &lt;script&gt;
       document.getElementById('myDialog').show(); // note that this is a method of &lt;dialog&gt;, this is not a jQuery method.
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>dialog {
      position: absolute;
      left: 0; right: 0;
      margin: auto;
      border: solid;
      padding: 1em;
      background: white;
      color: black;
  
      width: -moz-fit-content;
      width: -webkit-fit-content;
      width: fit-content;
  
      height: -moz-fit-content;
      height: -webkit-fit-content;
      height: fit-content;
  
      visibility:hidden;
      opacity:0;
      transition:visibility 10s linear 10s,opacity 10s linear;
  }
  
  dialog[open] {   
      visibility:visible;
      opacity:1;
      transition-delay:0s;
  }
  
  .backdrop {
      position: fixed;
      background: rgba(0,0,0,0.1);
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
  }
  </code></pre>