CSS渐变动画 [英] CSS Gradient Animate

问题描述

我尝试根据这里说明动画CSS渐变，但是我不能让它工作。作为一个例子，我把 this jsfiddle。

作为概述，看起来渐变上的CSS转换似乎不起作用。

  
 -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,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,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）; 
} 
  

我使用一些javascript / jQuery来添加/删除doublewin类。当使用相同的代码，但使用一个坚实的背景，它工作正常，如jsfiddle链接所示。

它是可能的动画CSS3梯度或我做某事错误？

任何帮助都非常感谢。

解决方案你不能对css的背景渐变进行动画处理，但你仍然可以通过动画处理不透明度来尝试使它工作。

如果你有两个容器，具有完全相同的宽度和高度，每个具有不同的渐变背景颜色，您可以将容器淡出到不透明度：0。

如果不想要为第二个后台容器的代码添加额外的标记，可以使用CSS伪选择器:: before和:: after来执行此操作。

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.

解决方案

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.

这篇关于CSS渐变动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！