CSS: Transition does not work in a firefox extension

Question

I have something like the following in my 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);
}

Transition is ignored. On mouse over/out, the color of linear-gradient appears/disappears instantly. If i put in place of linear-gradient any single color, e.g. rgba(229,95,218,1) or purple etc, transition works as expected: on mouse over/out, the color fades in/out gradually.

I have tried also background-image and background-color with same results.

Any ideas on why transition does not work in combination with linear-gradient? This is what i want to accomplish.

A linear gradient is treated as background **image** which cannot be transitioned. — Paulie_D, Nov 03 '14 at 11:57
possible duplicate of [Use CSS3 transitions with gradient backgrounds](http://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds) — Paulie_D, Nov 03 '14 at 11:58

score 0 · Answer 1 · answered Nov 03 '14 at 13:00

demo - http://jsfiddle.net/victor_007/bd0ftLmL/

you can use a pseudo element for gradient and 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>

David Pankov · Answer 2 · 2014-11-03T12:14:44.930

You cannot animate gradient but you can do that.

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

If you want to make gradient animation use jQuery or Javascript.

CSS: Transition does not work in a firefox extension

2 Answers2