title: Delayed CSS3 modal window fade in
body: <p>I have a modal window that I'm trying to have appear after about 7 seconds, with a close button so users can close it if they want to. I got it to close when you click the close button with this code:</p>
  
  <pre><code>.tip {
    z-index: 99999;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    -o-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
  }
  
  .tip:target {
      opacity:1;
      pointer-events: auto;
  }
  </code></pre>
  
  <p>And the HTML:</p>
  
  <pre><code>&lt;a href="#tip1"&gt;Open Modal&lt;/a&gt;
  &lt;div class="tip" id="tip1"&gt;
    Try clicking around a bit.
    &lt;a href="#close" title="Close" class="close"&gt;X&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How would I get it to appear automatically when the page first loads after a short delay? I tried using CSS keyframes, but it would disappear a split second after appearing, or the close button wouldn't work at all.</p>