title: Show sliding div at page load
body: <p>I have a div fixed on the left of my page that starts partially hidden off the page and then slides smoothly in on mouseover. What I'd like to do is have the div be fully visible at page load, then slide away after a few seconds, then have its normal mouseover functionality.</p>
  
  <p>The div in question:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;a href="#" target="_blank"&gt;
      &lt;div id="calculator"&gt;Novated Lease Calculator&lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#calculator {
      width: 297px;
      height: 60px;
      margin: 0;
      padding: 0;
      text-indent: -9999px;
      background: url("../img/calculator-button.png") no-repeat;
      position: fixed;
      top: 218px;
      left: -247px;
      z-index: 999;
      -webkit-transition-duration: 0.3s;
      -moz-transition-duration: 0.3s;
      -o-transition-duration: 0.3s;
      transition-duration: 0.3s;
  }
  
  #calculator:hover {
      left: 0;
  }
  </code></pre>
  
  <p>I'd like to use a CSS solution if possible; however javascript is OK if there's no alternative.</p>