title: How to animate to position fixed?
body: <p>I try to animate a DIV that gets fixed after 1 second. But I can't make it done. I want after one second the div called "homepage-hero-module" to slide from right to left. As you can see in the FIDDLE it changes to fixed after one second. So How to animate this?</p>
  
  <p>I tried with css, but no luck. </p>
  
  <pre><code>-webkit-transition: left 1s;
    -moz-transition: left 1s;
    -o-transition: left 1s;
    transition: left 1s;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>-webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/0ydtmLLj/" rel="noreferrer">JSFIDDLE</a></p>
  
  <p>HTML CODE:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="homepage-hero-module"&gt;
          Container with data
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS CODE:</p>
  
  <pre><code>    body, html {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
  }
  .container-fluid {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .homepage-hero-module {
    background: #DDD;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
  }
  .fixed {
      position: fixed;
      top: 0px;
      left: 0px;
      width: 20px;
      height: 100%;
      background: red;
  }
  img {
    height: 100%;
    width: auto;
  }
  </code></pre>
  
  <p>JS code:</p>
  
  <pre><code>$(document).ready(function() {
      setTimeout( function(){
                $('.homepage-hero-module').addClass('fixed');
      },1000);
  });    
  </code></pre>