CSS margin-left переход не работает

Question

Я пытаюсь сделать переход от центра влево и уменьшить высоту изображения. Перепад высоты работает нормально, но маржа просто телепортируется влево, а не оживляет.

это мой код:

#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; 
} 

JS:

$('#logo_img').addClass('tiny'); 

рабочий пример: http://jsfiddle.net/v0w6s3ms/1/

любая помощь?

Answer 1

Вы не можете анимировать auto свойства вместо этого попытаться что-то вроде этого

$(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>

Answer 2

Вы хотите перейти от "Левых: авто" в "запасе левый: 0". Авто не является определенным значением, поэтому его нельзя уменьшить до нуля. Установите margin-left: 50% вместо «auto».

Answer 3

Попробуйте это:

#logo_img { 
    height: 55px; 
    width: 55px; 
    background-color: red; 
    margin-left: 50%; //Change the auto to 50% 
    margin-right: auto; 
    display: block; 
    transition: all 1s ease-in-out; 
} 

#logo_img.tiny { 
    height:45px; 
    margin-left: 0; 
} 

JSFIDDLE DEMO