CSS margin-left transition not working

Related searches

I'm trying to do a transition from the center to left and reduce the height of an image. The height transition is working fine, but the margin just teleports to the left instead of animating.

this is my 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');

working example: http://jsfiddle.net/v0w6s3ms/1/

any help?

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>

margin-left transition not animating, I've got it working using jQuery animate() but want to improve performance using CSS transitions. I'm using jQuery to add a new class to the� Definition and Usage. The margin-left property sets the left margin of an element.. Note: Negative values are allowed.

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".

transition, The transition property is a shorthand property used to represent up to .box { width: 150px; height: 150px; background: red; margin-top: 20px; margin-left: auto; margin-right: For example, the following demo transitions on hover, but not on Be helpful and kind and yours will be published no problem. CSS Transitions. CSS transitions allows you to change property values smoothly, over a given duration. Mouse over the element below to see a CSS transition effect: CSS.

Try this:

#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

Using CSS Margin Auto May Cause CSS Transitions Not To Work , In the above example, the box starts at the very left side of the window and moves all the way to the right size of the window when the mouse� My transitions work fine in IE and Chrome but not FF. I am running 28.0, OS Mavericks. The hover CSS and transition stuff is below. I am trying to get an image to

in 2019 you can
/* replace */
margin-left: auto; 
/* with */
margin-left: calc(100% - 55px);
details:

It is also possible to make it with CSS now. use the property Calc and subtract the width of your element. Thus, the margin will be set specifically and not auto.

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="">

Margin & Directional Transition, Insecure Resource. You are linking to a resource using the non-secure http:// protocol, which may not work when the browser is using https:// like CodePen� Using css transition on opacity alone to fade out an element leads to the problem that links on the faded element stay active while links on elements covered by the faded element do not work. We gave examples for this behaviour and a workaround using both css transition opacity and css transition visibility.

For someone whose content has an unfixed size:

This can also be achieved by using animation between state flex: none; and flex: auto;. But you will need to have a wrapper around the content, and the animation is applied to the wrapper, instead of the "auto" margins.

$('.content').click(function(e) {
  $(e.target).closest('.wrapper').toggleClass('move');
});
.container {
  display: flex;
  padding: 1rem;
  margin-bottom: 1rem;
  background: #D8E0BB;
  position: relative;
}

.wrapper {
  flex: none;
  transition: flex 1s ease;
  display: flex;
  position: relative;
  background: #B6CEC7;
}

.wrapper.move {
  flex: auto;
}

.wrapper.content-align-left {
  margin-left: auto;
}

.wrapper.content-align-ends {
  margin: auto;
}

.content {
  padding: 1rem;
  text-align: center;
  background: #86A3C3;
  color: #6B3074;
}

.content-align-right .content {
  margin-left: auto;
}

.content-align-left .content {
  margin-right: auto;
}

.content-align-center .content {
  margin: auto;
}

.content-align-ends .content:first-child {
  margin-right: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  Look for <b>"key property"</b> comment in the css for the important style to make the animation to work.
  <br><br>
</div>

<div class="container">
  <div class="wrapper content-align-right">
    <div class="content">
      Click Me <br> align right <br> ---------------------
    </div>
  </div>
</div>

<div class="container">
  <div class="wrapper content-align-left">
    <div class="content">
      Click Me <br> align left <br> ------
    </div>
  </div>
</div>

<div class="container">
  <div class="wrapper content-align-center">
    <div class="content">
      Click Me <br> align center <br> ---------------
    </div>
  </div>
</div>

<div class="container">
  <div class="wrapper content-align-ends">
    <div class="content">
      Click Me <br> align ends <br> ----------------------
    </div>
    <div class="content">
      Click Me <br> align ends <br> ------
    </div>
  </div>
</div>

Notes Before Firefox 57, transitions do not work when transitioning from a text-shadow with a color specified to a text-shadow without a color specified (see bug 726550). Notes Before Firefox 57, cancelling a filling animation (for example, with animation-fill-mode: forwards set) can trigger a transition set on the same element, although only

Here's the challenge: CSS transition does not work when the height of an element is set to auto. Here's what you'll get. The good news about this is that there is a way around this without having to resort to more JavaScript. The Solution. The hack is to transition the max-height property instead of the height property. First, we have to

In the rare cases where width is overconstrained (i.e., when all of width, margin-left, border, padding, the content area, and margin-right are defined), margin-left is ignored, and will have the same calculated value as if the auto value was specified.

Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. The -webkit-transition Boolean CSS media feature is a Chrome extension whose value is true if the browsing context supports CSS transitions .

Comments
  • thanks for the example. Is it possible to make your CSS solution working in Edge?