Firefox内部的Firefox转换样式无法按预期工作

Question

Helloes ..

我们有这个HTML

<div id="bz"></div>

<ul>
    <li onClick="black();">Black</li>
    <li onClick="brown();">Brown</li>
    <li onClick="red();">Red</li>
</ul>

这个CSS：

#bz{
  float:left;
  background-image:url('http://almakeramidi.gr/wp-content/uploads/2016/02/keramidi.jpg');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:100%;
  width:417px;
  height:468px;
  transition:all 1s;
}

这篇写得不好的JS：

function black(){
document.getElementById('bz').style.cssText += "opacity:0;";
document.getElementById('bz').style.backgroundImage = "url('http://almakeramidi.gr/wp-content/uploads/2016/02/gkri.jpg')";
document.getElementById('bz').style.cssText += "opacity:1;";
}

function brown(){
document.getElementById('bz').style.cssText += "opacity:0;";
document.getElementById('bz').style.backgroundImage = "url('http://almakeramidi.gr/wp-content/uploads/2016/02/kafe-1.jpg')";
document.getElementById('bz').style.cssText += "opacity:1;";
}

function red(){
document.getElementById('bz').style.cssText += "opacity:0;";
document.getElementById('bz').style.backgroundImage = "url('http://almakeramidi.gr/wp-content/uploads/2016/02/kokkino-1.jpg')";
document.getElementById('bz').style.cssText += "opacity:1;";
}

让我们把它们全部放在oven。

现在，如果您在Chrome中查看它，它会在颜色之间平滑过渡。

但是如果你在Firefox中看到这一点，那么平滑性就会消失！

任何人都知道为什么？

非常感谢！