title: There is no transition when change position of element in javascript
body: <p>When I change the position left of the bg in the css there is a transition. But when i change the position in javascript there is no transition.</p>
  
  <p>Steps to follow to see what im talking about</p>
  
  <ol>
  <li>in the css change the bg left from 1366px to 0. you will see a transition.</li>
  </ol>
  
  <p>2.change the position of the bg back to 1366px.</p>
  
  <ol start="3">
  <li>now uncomment the js code. it will change the bg position but there is no transition</li>
  </ol>
  
  <p>here is the codepen i dont think u can change the code on stackoverflow</p>
  
  <p><a href="https://codepen.io/anon/pen/oGKMpm" rel="nofollow noreferrer">https://codepen.io/anon/pen/oGKMpm</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var bg = document.getElementsByClassName('bg');
  
  
  // uncomment the code below. there is no transition
  
  // bg[0].style.left ='0';</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    padding: 0;
    margin: 0;
  }
  
  html, body, .bg {
    height: 100%;
    width: 100%;
  }
  
  .bg {
    position: absolute;
    background: blue;
    transition: all 0.5s linear;  
    
  /* change this to 0px. there will be a transition. change it back to 1366px. and then uncomment the javascript code */
    left: 1366px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="bg"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>