4

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.

Community
  • 1
  • 1
Dan Twining
  • 640
  • 4
  • 17
  • 30
  • 2
    It seems transitions with gradients are not yet supported, I don't know how that answer was accepted/upvoted, you may want to check this [other answer](http://stackoverflow.com/a/9695075/2049063) with a method for 'fake' transitions using absolute positioned elements – omma2289 Sep 01 '13 at 21:04
  • Hi, I am the one who wrote the first answer. I'm currently working to find out why it does not work, and am extremely sorry for the inconvenience. – arik Sep 11 '13 at 14:12
  • Have a look here http://jsbin.com/UsUtiQek/4/ –  Jan 24 '14 at 14:16
  • Take a look here: http://stackoverflow.com/questions/25554852/moving-gradient-bar-in-css/25554853#25554853 – 0lli.rocks Aug 29 '14 at 11:58

1 Answers1

5

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.

Git Paul
  • 211
  • 2
  • 4