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

Question

我一直在玩CSS转换，并制作了这个JSFiddle

transition属性目前受到所有主要浏览器的支持，也不需要供应商前缀（不过我已经将它们包含在我的fiddle中）。我还在W3C网站上搜索了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+中，更改回初始状态的持续时间与实际过渡播放时间的持续时间相同。

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

Answer 1

您可以添加第二个过渡，使所有人的"还原"动画更快（如果这符合您的要求）。

请参阅此处更新的fiddle和下面的部分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。这样，您就可以在鼠标离开时计算其当前大小，从而保持转换速度不变。