Geek Answers Handbook

Animate CSS Gradient

I am trying to animate a CSS gradient as described here , but I cannot get it to work. As an example, I compiled this jsfiddle.

As a review, it seems that CSS transitions on gradients do not 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 use javascript / jQuery to add / remove the "doublewin" class. Using the same code, but using a solid background, it works fine, as shown in the jsfiddle link.

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

Any help is greatly appreciated.

+4
source share
1 answer

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 same width and height, each with a different gradient background color, you can display the container on top for opacity: 0.

If you do not want to add additional inscription to the code for the second background container, you can use the CSS :: before and :: after pseudo selectors to do this.

+5
source

More articles:


All Articles