title: Elements Floated Right do not activate Transitions
body: <p>I am attempting to get elements to transition onscreen. For example purposes I have set them to transition on page load.</p>
  
  <p>The elements that are not floated work perfectly fine. However, the elements that have been floated right (They have the class <code>exleft</code> because they should be expanding leftward) do not transition.</p>
  
  <p>Can someone explain why this is happening?</p>
  
  <p><a href="https://jsfiddle.net/redstone_herder/7nzpnd8e/" rel="nofollow">JsFiddle here</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="templatebox"&gt;
    &lt;div class="ribbon exright" id="r1"&gt;
    &lt;/div&gt;
    &lt;div class="ribbon exleft" id="r2"&gt;
    &lt;/div&gt;
    &lt;div class="ribbon exright" id="r3"&gt;
    &lt;/div&gt;
    &lt;div class="ribbon exleft" id="r4"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#templatebox{
    width: 100%;
    height: 800px;
    padding-top: 50px;
  }
  .ribbon{
    height: 50px;
    position: relative;
    transition: all 1s ease;
    width: 300px;
    margin-bottom: 20px;
    z-index: 1000;
  }
  .exleft{
    right: -1200px;
    left: 0px;
    margin-right: -100px;
    float: right;
  }
  .exright{
    left: -1200px;
    right: 0px;
    margin-left: -100px;
  }
  
  #r1{
    background-color: red;
  }
  #r2{
    background-color: green;
  }
  #r3{
    background-color: blue;
    top: 170px;
  }
  #r4{
    background-color: yellow;
    top: 170px;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var ribbons = document.getElementsByClassName("ribbon");
  for(var i=0, j=ribbons.length; i&lt;j; i++){
    ribbons[i].style.right = "0px";
    ribbons[i].style.left = "0px";
  }
  </code></pre>