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

您想要从"margin-left:auto"转换为"margin-left:0".Auto不是定义的值,这就是为什么它不能减少到零.margin-left:50%而不是"auto".