title: Creating css transitions without using position:absolute
body: <p>I realize that css animations are a well covered topic, but I'm just wondering about the best way to create simple slide like transitions? Mostly, when you read about slide transitions like that, some kind of position:absolute is assumed. That is not the way content is usually organized in HTML and it shouldn't be. </p>
  
  <p>So, if I want to create a transition of one div sliding to the left and one div sliding from the right, what would be a good strategy without assuming that any of those divs has absolute positioning or any other specific transition specific stuff going on to start with? </p>
  
  <pre><code> &lt;div class="container"&gt;
       &lt;div class="this-should-slide-left"&gt;
           &lt;div&gt;Some content&lt;/div&gt;
           &lt;div&gt;Some more&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class="this-should-from-left"&gt;&lt;!--not visible initially--&gt;
           &lt;div&gt;Some more content&lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I came up with this solution which seems to work, even though I'm not sure if it's elegant:</p>
  
  <p><a href="http://jsfiddle.net/CAg4f/4/" rel="noreferrer">http://jsfiddle.net/CAg4f/4/</a></p>