css - 为什么 webkit 浏览器的转换持续时间总是固定的？

Question

我一直在研究 CSS 转换并制作了这个 JSFiddle

transition 属性目前被所有主流浏览器支持，并且不需要供应商前缀(但我已将它们包含在我的 fiddle 中)。我还搜索了 W3C site对于 transition-duration 的一些已知问题，但未找到任何问题。

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

Google Chrome/webkit 浏览器的问题

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.

要查看它的运行情况，请将鼠标悬停在 .foo div 上，并在转换开始时快速移除光标。
[ P.S: 10s 的持续时间可能很无聊，但我这样做是为了清楚地观察问题。 ]

Answer 1

您可以添加第二个过渡以使所有人更快地“恢复”动画(如果这适用于您想要的)。

参见 updated fiddle here和下面的部分 CSS:

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