尚未完成时，Css过渡不会平滑过渡

Question

1. 我有一张背景图片，在下列情况下会更改为另一张图片：
2. 我使用过渡来显示这种效果。
3. 当转换完成时，我的旧图像在失去焦点时使用相同的转换重新进行（不悬停）。

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

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

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

Answer 1

背景图像转换似乎是一种无计划的“副作用”，它不能完全发挥作用，并且在浏览器中支持非常有限

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

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

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