为什么过渡的持续时间总是用webkit浏览器修复？

Question

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

该transition属性目前由所有主流浏览器支持,并且不需要供应商前缀(但是我将它们包括在我的小提琴中).我也在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上,并在转换开始时快速移除光标.
[PS:持续时间10s可能很无聊,但我已经明白了这个问题.]

Answer 1

您可以添加第二个过渡，以使“恢复”动画对所有人来说更快（如果这适合您想要的）。

请参阅此处更新的小提琴和下面的部分 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 */
}