title: Sliding in a fixed element using CSS3 transitions
body: <p>I have an element with fixed position and auto width (must have auto width) that should slide-in from the left.</p>
  
  <p>I've defined two states for it: <em>hidden</em> and <em>visible</em>. When visible it should be positioned on the left side of the window, when hidden it should be just outside of view.</p>
  
  <h3>Visible state</h3>
  
  <pre><code>left: 0;
  /* right: auto; */
  </code></pre>
  
  <h3>Hidden state</h3>
  
  <pre><code>right: 100%;
  /* left: -element auto width */
  </code></pre>
  
  <p>Both of these states display ok when transition is static without any animation.</p>
  
  <h2>Alternative 1: CSS3 transforms</h2>
  
  <p>I've also tried using CSS3 transforms, which works, but I'm afraid of cross browser differences. When transitions are not supported transition would automatically fall back to static change, but if I use CSS3 transforms, there's no direct fall-back. It has to be explicitly defined.</p>
  
  <p>This is a <a href="http://jsfiddle.net/zzhdv/2/">working demo</a> of the effect by using CSS3 transitions <strong>and transforms</strong>. As you can see, the width of the left bar is wide as much as it has to be and it slides just beyond the left edge when going into <em>hidden</em> state.</p>
  
  <h2>Alternative 2: Collapsing element width</h2>
  
  <p>This could somehow be done by manipulating element width (while also using max/min width to support auto width), but the problem with this is that content doesn't move. It's apparent that element width is being manipulated.
  We have to move the element including its content.</p>
  
  <h2>Question</h2>
  
  <p>Is there any way to avoid CSS3 tranforms while also satisfying following rules:</p>
  
  <ul>
  <li>width <strong>must</strong> be auto</li>
  <li>when visible it's positioned on the left window edge</li>
  <li>when hidden it's positioned just outside of left edge</li>
  </ul>