Переход с поля margin-left CSS не работает

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

это мой код:

#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/

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

Ответ 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>

Ответ 2

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

Ответ 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

Ответ 4

в 2019 году вы можете

/* replace */
margin-left: auto; 
/* with */
margin-left: calc(100% - 55px);

подробности:

Также возможно сделать это с помощью CSS. используйте свойство Calc и вычтите ширину вашего элемента. Таким образом, маржа будет установлена специально, а не автоматически.

jQuery(document).ready(function( $ ) {
  $('#logo_img').on('click', function() {
  $(this).toggleClass('tiny');
  }, );
}); //end ready

#logo_img {
        height: 55px;
        width: 55px;
        background-color: red;
        margin-left: Calc(100% - 55px); 
        margin-right: auto;
        display: block;
        transition: all 1s ease-in-out;
    }
#logo_img.tiny {
    height:45px;
    margin-left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="logo_img" src="https://picsum.photos/100/200" alt="">