CSS: Transition does not work in a firefox extension -

CSS: Transition does not work in a firefox extension -

i have next in 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 ignored. on mouse over/out, color of linear-gradient appears/disappears instantly. if set in place of linear-gradient single color, e.g. rgba(229,95,218,1) or violet etc, transition works expected: on mouse over/out, color fades in/out gradually.

i have tried background-image , background-color same results.

any ideas on why transition not work in combination linear-gradient? want accomplish.

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

you can utilize pseudo element gradient , transition

class="snippet-code-css lang-css prettyprint-override">#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: .5s ease-in; z-index: -1; } #mybox-id:hover:after { opacity: 1; } class="snippet-code-html lang-html prettyprint-override"><div id="mybox-id"> <p>dolor sit down 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 down 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 down 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 down 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 down 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>

css firefox animation background transition