title: CSS transitions solving the direction problem
body: <p>My first attempt at CSS transitions is with a sliding panel system similar to iOS. All working but the panels are sliding out to the left and in from the left. I'm after an iOS style slider where as one panel slides out to the left the other in from the right, and if one goes back the opposite occurs.</p>
  
  <pre><code>#container{    
      position: relative;
      overflow: hidden;
      width: 250px;
  }
  
  .panel{
      position: absolute;    
      overflow: hidden;
      top: 0;
      left: 250px;
      width: 250px;
      max-height: 0;
      -webkit-transition: left .25s linear, max-height .25s linear;
      -moz-transition: left .25s linear, max-height .25s linear;
      -o-transition: left .25s linear, max-height .25s linear;
      transition: left .25s linear, max-height .25s linear;
      display:block;
  }
  
  .panel:target{
      left: 0px;
      max-height: 9999px;
      position: relative;
  }
  </code></pre>
  
  <p>Any ideas,</p>
  
  <p>Marvellous</p>