La transition CSS-gauche ne fonctionne pas

Je suis en train de faire une transition à partir du centre vers la gauche et de réduire la hauteur d'une image.
La hauteur de la transition fonctionne très bien, mais à la marge seulement se téléporte à la gauche, au lieu de l'animation.

c'est mon code:

#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');

de travail exemple: http://jsfiddle.net/v0w6s3ms/1/

toute aide?

source d'informationauteur DarkW

  1. 5

    Vous voulez que la transition de "margin-left:auto" à "margin-left:0". L'Auto n'est pas une valeur définie, c'est pourquoi elle ne peut pas être réduite à zéro. Ensemble margin-left: 50% au lieu de "auto".

  2. 2

    Essayez ceci:

    #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 DÉMO