title: CSS Enter Animation for Page
body: <p>I have this slide in animation which works on hovering event for now. But now i want that animation to work as soon as page is loaded and whenever window width is changed to below 900px it should slide out.</p>
  
  <p>Here is my Html:</p>
  
  <pre><code>&lt;div class="left-nav pack-container slide-wrapper"&gt;
    &lt;ul class="nav nav-pills nav-stacked" id="left-nav-list"&gt;
      &lt;li class="active"&gt;&lt;a href="#"&gt;Sections&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Travels&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
      &lt;li class="active"&gt;&lt;a href="#"&gt;Recently Viewed&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS Code:</p>
  
  <pre><code>#left-nav-list {
  position: relative;
  left: -350px;
  transition: 1s;
  overflow: hidden;
  width: 200px;
  }
  
  .slide-wrapper:hover #left-nav-list {
  transition: 1s;
  left:0;
  }
  </code></pre>
  
  <p>i tried by fetching the id and do classList.add, but had no luck with it.</p>
  
  <p>Used following additionals:</p>
  
  <ul>
  <li><p>AngularJS</p></li>
  <li><p>Bootstrap </p></li>
  </ul>
  
  <p><a href="https://jsfiddle.net/k3zr7a0v/" rel="nofollow" title="FIddle">Fiddle</a></p>
  
  <p>Thanks</p>