为什么 webkit 浏览器的过渡持续时间总是固定的？

Question

我一直在玩 CSS 过渡并制作了这个 JSFiddle

transition 属性目前受到所有主要浏览器的支持，并且也不需要供应商前缀（但我已将它们包含在我的小提琴中）。我还在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 浏览器的问题

如果我在过渡结束之前移除光标，它会通过 (10s) 过渡属性中定义的持续时间返回到初始状态。

例如：
我在 1s 播放过渡后移除了光标，它通过 10s 回到了初始状态。

在 Firefox 和 IE10+ 中，变回初始状态的持续时间与实际过渡播放时间的持续时间相同。

要查看它的实际效果，请将鼠标悬停在 .foo div 上，并在过渡开始时快速移除光标。
[ PS：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 */
}

Answer 2

我以前没有经历过这种情况，但我想我可以看到正在发生的事情。

如果我正确理解您的问题，这是因为当您最初悬停并在转换完成之前移除时，chrome 认为它必须在同一时间段内转换一个小的变化，因此它看起来更慢。

例如，如果您将鼠标悬停在直径为 600 像素的圆圈上 1 秒，并且直径达到 500 像素（只是弥补），那么当您停止悬停时，它只需在 10 秒内向后扩展 100 像素，而不是它正在计算的完整 500 像素在初始悬停时。因此速度降低。

做到这一点的可靠方法是使用 Javascript 而不是 CSS。这样您就可以在鼠标离开时计算其当前大小，从而保持过渡速度恒定。