Why is the duration of transition always fixed with webkit browsers?

Question

I've been playing around with CSS transition and made this JSFiddle

The transition property is currently supported by all the major browsers and doesn't require vendor prefixes either (however I have included them in my fiddle). I have also searched on W3C site for some known issue with transition-duration and didn't find any.

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; 
}

The problem with Google Chrome / webkit browsers

If I remove the cursor earlier before the transition ends, it goes back to it's initial state by taking (10s) the duration defined in the transition property.

For example :
I removed the cursor after transition played for 1s it goes back to it's initial state by taking 10s.

In Firefox and IE10+, the duration of changing back to it's initial state is the same duration of actual transition playing time.

To see it in action hover over to the .foo div and remove the cursor quickly when the transition starts.
[ P.S: The duration of 10s might be boring but I have made this to observe the issue clearly. ]

Answer 1

You could add a second transition to make the "revert" animation faster for all (if that works for what you want).

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 */
}