Css 转换在尚未完成时不会平滑地转换回来

Question

1. 我有一个背景图像，当：hover时会变成另一个图像。
2. 我用过渡来展示这种效果。
3. 当过渡结束时，我的旧图像在失去焦点（不悬停）时使用相同的过渡收获。

请参阅一个工作示例（使用铬）：http://jsfiddle.net/WZqrY/3/

我的问题：当我在第一次过渡中途取出鼠标时，第二个过渡效果不会消失。您可以尝试将鼠标移动到图像中一秒钟，然后将其移出图像。我怎样才能让这一切顺利进行？

注意：当我使用颜色而不是图像时，这种效果确实以我假装的方式工作。

Answer 1

背景图像过渡似乎是一种计划外的"副作用"，功能不全，浏览器的支持非常有限

"这仅适用于Chrome 18+和2012年以后构建的Webkit Nightlies。这似乎是CSS4交叉淡入淡出工作的副作用" - 来源

目前，您更好的选择是"容器中的 2 张图像"解决方案 - http://jsfiddle.net/WZqrY/4/

这将适用于所有支持过渡的浏览器。