Css 过渡在尚未完成时不会顺利过渡回来

Question

1. 我有一个背景图像，当 :hover 时会变成另一个图像。
2. 我使用过渡来展示这种效果。
3. 当转换完成时，我的旧图像在失去焦点（非悬停）时使用相同的转换重新出现。

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

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

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

Answer 1

背景图像过渡似乎是一种计划外的“副作用”，它的功能并不完整，并且在浏览器中的支持非常有限

“这只适用于 Chrome 18+ 和 2012 年以后构建的 Webkit Nightlies。这似乎是 CSS4 交叉淡化工作的副作用” - source

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

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