Why is the transition duration always fixed by webkit browsers?

Question

I played with CSS transition and made it JSFiddle

The transition property is currently supported by all major browsers and also does not require vendor prefixes (however, I have included them in my fiddle). I also searched the W3C site for a known transition-duration problem and did not find it.

HTML

 <div class="foo"></div> 

CSS

 .foo { background: #4FC093; display: block; width: 600px; height: 600px; box-shadow: 0 0 300px inset; margin: 0 auto; border-radius: 50%; cursor: pointer; transition: all 10s ease; } .foo:hover { width: 100px; height: 100px; box-shadow: 0 0 50px inset; } 

Problem with Google Chrome / webkit browsers

If I delete the cursor before the transition ends, it returns to its original state, assuming ( 10s ) the duration specified in the transition property.

For instance:
I deleted the cursor after switching to 1s , it returns to its original state, taking 10s .

In Firefox and IE10 +, the transition time is the same as the actual transition time.

To see this in action, hover over the .foo div and quickly remove the cursor when the transition starts.
[PS: Duration 10s may be boring, but I did this to clearly address the issue. ]

Answer 1

You can add a second transition to make the animation "return" faster for everyone (if it works as you wish).

See the updated fiddle here and partial CSS below:

 .foo { /* default properties */ transition: all 1s ease;/* this transition will apply when user exits hover state */ } .foo:hover { /* properties for hover */ transition: all 10s ease;/* this transition will apply when user hovers */ } 

Answer 2

I have not experienced this before, but I think I see what is happening.

If I understand your problem correctly, this is due to the fact that when you first move the cursor and delete before the transition is completed, chrome sees that it has to switch to a small change over the same period of time, so that it looks slower.

For example, if you hover over a circle with a diameter of 600 pixels for 1 second, and the diameter reaches 500 pixels (just do it), then when you stop freezing, it should again rotate 100 pixels in 10 seconds, not 500 pixels which he calculated at the initial hover. Therefore, the speed decreases.

The surefire way to do this is to do it using Javascript instead of CSS. Thus, you can calculate your current size when leaving the mouse and, therefore, maintain a constant transition speed.