CSS：过渡在 Firefox 扩展中不起作用答案

【问题标题】：CSS: Transition does not work in a firefox extensionCSS：过渡在 Firefox 扩展中不起作用
【发布时间】：2023-03-31 05:34:01
【问题描述】：

我的 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) 或紫色等，过渡按预期工作：鼠标悬停/移出时，颜色逐渐淡入/淡出。

我也尝试过背景图像和背景颜色，结果相同。

关于为什么过渡不能与线性梯度结合使用的任何想法？这就是我想要完成的。

【问题讨论】：

制作一些演示代码....或使用 jsfiddle。谢谢
线性渐变被视为背景图像，无法过渡。
Use CSS3 transitions with gradient backgrounds的可能重复

标签： css firefox animation background transition

【解决方案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>

【讨论】：

【解决方案2】：

你不能动画渐变，但你可以做到。

<html>
<body>
<style>

    #mybox-id {
    width: 340px;
    height: 200px;
    -webkit-transition: all.5s ease-in; // webkit vendor prefix for chrome and safari
    -moz-transition: all.5s ease-in;  // moz vendor prefix mozilla firefox
    -ms-transition: all .5s ease-in;  // ms vendor prefix Internet explorer
    -o-transition: all.5s ease-in;  // o vendor prefix Opera
    transition: all.5s ease-in;  // and one for browser who support the property without prefixes
    }
    #mybox-id:hover {
     background: red; 
    }
</style>
<div id="mybox-id"><div>
</body>
</html>

如果要制作渐变动画，请使用 jQuery 或 Javascript。

【讨论】：