渐变的CSS3动画[重复]

如何解决渐变的CSS3动画[重复]

|                                                                                                                   这个问题已经在这里有了答案：                                                      

解决方法

Webkit渐变尚不支持过渡。它在规格中，但尚不起作用。 （请注意，如果您仅在进行颜色过渡-您可能要签出-webkit-filters-可以进行动画处理！） 更新：渐变过渡显然可以在IE10 +中使用     ,将每个渐变变量放在其自己的图层上。绝对定位它们。给他们每个人自己的关键帧互相同步。在这些关键帧中，为每个图层的每个关键帧定义不透明度，并在关键帧之间混合使用1和0。 注意容器的颜色会渗出，因此将这些层包裹在具有白色背景的父级中。 http://jsfiddle.net/jSsZn/     ,我通过应用：be归因于a标签解决了这个问题。 链接：http：//codepen.io/azizarslan/pen/xsoje CSS：

nav ul#menu li a {
    display: block;
    position: relative;
    z-index: 1;

    /* webkit gradient background */
    background: -webkit-linear-gradient(top,rgb(204,51),rgb(153,0));
}

nav ul#menu li a:before {
    width: 100%;
    height: 100%;
    display: block; 
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;

    /* webkit gradient background */
    background: -webkit-linear-gradient(top,rgb(0,156,204),111,145));

    /* webkit transition */
    -webkit-transition: all 250ms linear;

    /* before hack */
    content: \".\";
    text-indent: -99999px;
}

nav ul#menu li a:hover:before {
    opacity: 1;
}

    ,您应该检查一下css砂纸-这可以使您获得动画渐变，但这并不是一个纯粹的css解决方案。 CSS砂纸负责渐变的跨浏览器渲染，并且有一段JavaScript可以处理动画。 http://www.useragentman.com/blog/2010/04/05/cross-browser-animated-css-transforms-even-in-ie/     ,@Brian而不是使用新的html元素，而使用sudo元素：before和：after。将主要元素放置为相对，然后将伪元素放置为绝对，顶部，左侧，右侧和底部为0。 HTML：

<div></div>

CSS：

div {
    width: 200px;
    height: 200px;
    position: relative;
}

div::before,div::after {
    display: block;
    content: \'\';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

使用不透明度将关键帧和渐变添加到div和伪元素中。使用z-index控制哪个位于哪个顶部。     ,如果您正在寻找文本从纯色到渐变的过渡。只需为文本的RGBA动画设置动画，以显示应用于其的背景渐变。 CSS：

.button {
    background: -webkit-gradient(linear,left top,right bottom,color-stop(0%,#fe046e),color-stop(100%,#a02ed4));
    -webkit-background-clip: text;
    color: rgba(255,255,1);

    -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
}

.button:hover {
    background: -webkit-gradient(linear,0);
}