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>