title: CSS3 Transition from right side of window using :target
body: <p>I'm am facing two issue:</p>
  
  <p>Here is the jsFiddle to reference: <a href="http://jsfiddle.net/2D7Ss/1/" rel="nofollow">http://jsfiddle.net/2D7Ss/1/</a></p>
  
  <ol>
  <li><p>In the current jsFiddle, when the greeting box slides to the left, it appears entirely at once, instead of incrementally, before sliding to the left. The slide to the right works fine.</p></li>
  <li><p>If I set the greeting div's width to 100%, it doesn't slide to the left. This issue seems related to the one above because it appears entirely in the panel before sliding. But in this case the width is 100% so no sliding occurs.</p></li>
  </ol>
  
  <p>Ultimately, I'm am trying to build a page when each other page or content panel slides from the right. </p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;a href="#hello"&gt;Hello&lt;/a&gt; | &lt;a href="#goodbye"&gt;Goodbye&lt;/a&gt;
  &lt;div id="content"&gt;
      &lt;div id="hello"&gt;Hello&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
      &lt;div id="goodbye"&gt;Goodbye&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>body {
    margin-left: 5px;   
  }
  
  #content {
    background: #ccc;
    width: 100%;
    height: 102px;
    position: relative;
    overflow: hidden;
  }
  
  #content div {
    position: absolute;
    background: lightblue;
    width: 100px;
    height: 100px;
    border: 1px solid gray;
    left: 100%;
    -moz-transition: left 1s ease;
    -webkit-transition: left 1s ease;
  }
  
  #content &gt; div:target {
    left: 0;
  }
  </code></pre>