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）或紫色等，过渡按预期工作：鼠标上/下，颜色逐渐淡入/淡出。

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

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

Answer 1

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

您可以对pseudo和gradient

使用transition元素

#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>

Answer 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制作渐变动画。

CSS：Transition在firefox扩展中不起作用

2 个答案: