CSS margin-left transition not working

You want to transition from "margin-left:auto" to "margin-left:0". Auto is not a defined value, thats why it can't be decreased to zero. Set margin-left: 50% instead "auto".


You can't animate auto property instead try something like this 

$(function() {
  setTimeout(function() {
    $('#logo_img').addClass('tiny');
  }, 1000);
});
#logo_img {
  height: 55px;
  width: 55px;
  background-color: red;
  margin-left: calc(50% - 55px);
  margin-right: auto;
  display: block;
  transition: all 1s ease-in-out;
}
#logo_img.tiny {
  height: 45px;
  margin-left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="logo_img"></section>

Tags:

Css

Margin

Transition

Recent Posts