似乎有一个不应该存在的css转换延迟

Question

将鼠标悬停在每个功能区上，svg将改变颜色。一切似乎都很好:)）

http://codepen.io/anon/pen/qEILH

但是，只有第一个色带给出正确的结果，其他色带似乎在颜色转换发生之前有延迟，它们之间的唯一区别是href的值。

为什么这个？

这似乎只是Chrome上的一个问题。

Answer 1

你在谈论从灰色到白色的过渡吗？您使用的是哪个版本的IE？

尝试将.ico svg选择器更改为:(删除其他转换持续时间，或将其设置为0）

 .ico svg {
    position: relative;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0s; 
    fill:inherit;
 }

我认为这可能与您的其他浏览器无法理解转换持续时间有关。但Chrome确实如此，因此它会增加0.3秒，导致延迟。