CSS transition width/position with long duration issue

Question

Assume we want a transition for width/position

When using a long duration, an undesired behavior comes across, as the timing function will start from zero for the rest of the operation

    #test {
      border: solid 1px;
      width: 100px;
      height: 50px;
      transition: width 10s linear;
    }
    #test:hover {
      width: 1000px;
      transition: width 10s linear;
    }

<div id="test"></div>

When rehovering the div in any place during the transition say in the middle it will do the transition over 10s but for 500px not the original setups, even worse it will take 10s for the last 10px.

Any work around or I should use jQuery animate function?

Try will less delay in `#test` if you want it to snap back faster. — rageit, Jun 11 '15 at 15:55
@rageit It is still not clear which the problem is. Everything is working as it should on FF — Andrea Ligios, Jun 11 '15 at 15:56
@AndreaLigios The issue is that if you rehover the `
` when it has a width of `600px` (instead of the initial 100px) the new transition will take 10s again but for only `400px` and thus, the transition seems slower. I believe what the OP wants is to have a steady speed on the transition regarldess of the time that occurs. — Tasos K., Jun 11 '15 at 16:05
@tasoK. that what I want indeed :) In short I want the transition for the last 100px (If you re-hover) to be in 1second, so a percentage not a fixed duration — Eiad Samman, Jun 11 '15 at 16:08
@TasosK. Ok but it is not happening to me! Which kind of browsers are you using ?? EDIT: ok I've reproduced it using Chrome. It doesn't act like this on Firefox, as said before — Andrea Ligios, Jun 11 '15 at 16:13
@AndreaLigios you are right. It does not work the same in Firefox and Chrome. I guess in Firefox it works as the OP wants — Tasos K., Jun 11 '15 at 16:16
Firefox, IE & Safari works as I want, the problem seems to be only in Chrome and I think I will leave it as it is, till Chrome do it as the others Thanks all — Eiad Samman, Jun 11 '15 at 16:25
You can lower the visual problem by using a shorter duration for the first (non-:hover) transition: `#test { transition: width 3s linear; }`; but that would need some hack to only target Blink-based browsers; — feeela, Jun 12 '15 at 19:59

score 1 · Answer 1 · answered Jun 12 '15 at 17:13

Here's a solution, if you don't mind scripting the animation. Essentially, you have to know the time left to cover the remaining width.

Of course, you can make this function to be used on any element, also you can pass in the desired width, but that's outside of this scope.

$("#test").on("mouseover", function(){
  var $el = $(this);  
  var time = 10000 - $el.width()*10; // This is the actual remaining animation time

  $el.stop().animate({"width": "1000px"}, time, "linear");
});

$("#test").on("mouseout", function(){
  var $el = $(this);
  var time = $el.width()*10; // This is the actual remaining animation time
  
  $el.stop().animate({"width": "100px"}, time, "linear");
});

#test {
  border: solid 1px;
  width: 100px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="test"></div>

Yea that would works perfectly, but as you can see in the comments the pure CSS works fine too except for Chrome, furthermore I gave the width as an example but what I am actually willing to do is animating a background-position but as this [link](http://stackoverflow.com/questions/5171080/jquery-animate-background-position) said its not quite supported cross-platforms and it may not be supported in the future — Eiad Samman, Jun 12 '15 at 18:23
I see. I guess I wanted to provide a temporary solution, until you can get something better or have Chrome implementing it. However it won't quite apply for your use case. Good luck! — George Nemes, Jun 12 '15 at 18:29

CSS transition width/position with long duration issue

1 Answers1