尚未完成时，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/

这适用于所有支持转换的浏览器。