CSS:过渡在 Firefox 扩展中不起作用

Question

我的 css 中有如下内容:

#mybox-id {
 background: transparent;
 transition: background .5s ease-in;
}
#mybox-id:hover {
 background: linear-gradient(to top, rgba(229,95,218,1) 40%,
                            rgba(229,95,218,1) 40%, transparent);
}

过渡被忽略。在鼠标悬停/移出时，线性渐变的颜色出现/消失 即刻。 如果我用任何单一颜色代替线性渐变，例如rgba(229,95,218,1) 或紫色等， 过渡按预期工作:在鼠标悬停/移出时，颜色逐渐淡入/淡出。

我也尝试过 background-image 和 background-color 的结果相同。

关于为什么过渡不能与线性渐变结合使用有什么想法吗？ 这就是我想要完成的。

Answer 1

演示 - http://jsfiddle.net/victor_007/bd0ftLmL/

您可以为 gradient 和 transition 使用 pseudo 元素

#mybox-id {
  background: transparent;
  width: 100%;
  height: 500px;
  position: relative;
}
#mybox-id:after {
  content: "";
  background: linear-gradient(to top, rgba(229, 95, 218, 1) 40%, rgba(229, 95, 218, 1) 40%, transparent);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  opacity: 0;
  transition: all .5s ease-in;
  z-index: -1;
}
#mybox-id:hover:after {
  opacity: 1;
}

<div id="mybox-id">
  <p>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,</p>

  <p>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,</p>

  <p>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,</p>

  <p>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,</p>


  <p>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,</p>


</div>