CSS Gradient Animate

Question

I'm trying to animate a CSS gradient as described here but I can't get it to work. As an example I've put together this jsfiddle.

As a overview, it seems that CSS transitions on gradients doesn't seem to work.

div#Machine {
    -webkit-transition: background 5s;
    -moz-transition: background 5s;
    -ms-transition: background 5s;
    -o-transition: background 5s;
    transition: background 5s;
    background: rgb(71, 234, 46);
    background: -moz-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(71, 234, 46, 1)), color-stop(100%, rgba(63, 63, 63, 1)));
    background: -webkit-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
    background: -o-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
    background: -ms-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
    background: linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#47ea2e', endColorstr='#3f3f3f', GradientType=0);
}
div#Machine.doublewin {
    background: rgb(247, 247, 49);
    background: -moz-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(247, 247, 49, 1)), color-stop(100%, rgba(63, 63, 63, 1)));
    background: -webkit-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
    background: -o-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
    background: -ms-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
    background: linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f731', endColorstr='#3f3f3f', GradientType=0);
}

I'm using some javascript / jQuery to add / remove the "doublewin" class. When using the same code but using a solid background it works fine, as shown in the jsfiddle link.

Is it actually possible to animate a CSS3 gradient or am I doing something wrong?

Any help is greatly appreciated.

Answer 1

It seems you can't animate css background gradients, but you can still animate opacity to try and get this to work.

If you have two containers, one on top of the other with the exact same width and height, each with a different gradient background colour, you can fade out the container on top to opacity: 0.

If you don't want to add extra mark-up to your code for the second background container, you can use the CSS pseudo selectors ::before and ::after to do this.