title: How do you do slide in from the left and right web page transitions using CSS?
body: <p>I created page transitions for sliding in from the right and from the left using CSS similar to this (Below).  I got the idea from <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations" rel="nofollow">MDN CSS Animations</a>.</p>
  
  <pre><code>/* -webkit-, -moz-, -o- vendor prefixes omitted for brevity.
      See http://css-tricks.com/snippets/css/keyframe-animation-syntax/
      */
  .slidein-from-right {
      animation: slidein-from-right 500ms;
  }
  @keyframes slidein-from-right {
      from {
          margin-left: 100%;
          width: 300%;
          opacity: 0;
      }
      to {
          margin-left: 0%;
          width: 100%;
          opacity: 1;
      }
  }
  .slidein-from-left {
      animation: slidein-from-left 500ms;
  }
  @keyframes slidein-from-left {
      from {
          margin-right: 100%;
          width: 300%;
          opacity: 0;
      }
      to {
          margin-right: 0%;
          width: 100%;
          opacity: 1;
      }
  }
  </code></pre>
  
  <p>This works well for pages sliding in from the right. However, sliding in from the left does not work (because the containing div is float left).  I tried absolute positioning and other things for slide in from the right and slide in from the left page transitions, but there is always something wrong.  For example, float right causes elements to be too far to the right.  With other options I can't get the page centering, margins, and padding to be correct.</p>
  
  <p>What is the best way to do this?  Supporting just modern browsers is fine.</p>