title: CSS margin-left transition not working
body: <p>I'm trying to do a transition from the center to left and reduce the height of an image.
  The height transition is working fine, but the margin just teleports to the left instead of animating.</p>
  
  <p>this is my code:</p>
  
  <pre><code>#logo_img {
      height: 55px;
      width: 55px;
      background-color: red;
      margin-left: auto;
      margin-right: auto;
      display: block;
      transition: all 1s ease-in-out;
  }
  
  #logo_img.tiny {
      height:45px;
      margin-left: 0;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('#logo_img').addClass('tiny');
  </code></pre>
  
  <p>working example: <a href="http://jsfiddle.net/v0w6s3ms/1/" rel="noreferrer">http://jsfiddle.net/v0w6s3ms/1/</a></p>
  
  <p>any help?</p>