css3 animate适用于bg颜色但不适用于FF和Edge中的bg图像

Question

我动画/更改.hero div的背景图像，我想要它们之间的平滑过渡，所以我使用了3.3％的关键帧来实现它。使用bg颜色只能在每个浏览器中正常工作，但是当我使用背景时：url（＆＃34; someimg.jpg＆＃34;）它仅适用于Chrome。 Firefox和Edge忽略了3.3％的关键帧转换。

 .hero{
    height:600px;
    width: 100%;
    background:red;
      animation: bg 20s  ease infinite;
}
@keyframes bg {
  0% {   
background: red;
}
  30% {   
      background: red;
}
      33.3% {   
      background: blue;
}
          63.3% {   
      background: blue;
}
          66.6% {   
      background: green;
}
              96.6% {   
      background: green;
}
                  100% {   
      background: red;
}
}