javascript - Elements Floated Right do not activate Transitions -

i attempting elements transition onscreen. example purposes have set them transition on page load.

the elements not floated work fine. however, elements have been floated right (they have class exleft because should expanding leftward) not transition.

can explain why happening?

jsfiddle here

html:

<div id="templatebox">   <div class="ribbon exright" id="r1">   </div>   <div class="ribbon exleft" id="r2">   </div>   <div class="ribbon exright" id="r3">   </div>   <div class="ribbon exleft" id="r4">   </div> </div> 

css:

#templatebox{   width: 100%;   height: 800px;   padding-top: 50px; } .ribbon{   height: 50px;   position: relative;   transition: 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; } 

js:

var ribbons = document.getelementsbyclassname("ribbon"); for(var i=0, j=ribbons.length; i<j; i++){   ribbons[i].style.right = "0px";   ribbons[i].style.left = "0px"; } 

the floated ribbon has both left , right attribute value set. if both attributes set pixel value, left value used.

by setting

left: auto; 

you can manipulate right value , work expected.

here updated jsfiddle: https://jsfiddle.net/ym5p7y6v/