Question

真的没有办法用CSS动画渐变背景吗？

类似的东西：

@-webkit-keyframes pulse {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
  }
  50% {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(222,252,255)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
  }
}

我知道，对于Safari 5.1+和Chrome 10+，有一种新的渐变语法，但是现在，我必须坚持使用旧的渐变语法。

Answer 1

webkit渐变尚不支持转换。这是在规范中，但它还没有工作。

（p.s。如果你只进行颜色过渡 - 你可能想看一下-webkit-filters - 它做动画！）

更新：渐变过渡显然可以在IE10 +

中起作用

Answer 2

将每个渐变变化放在它自己的图层上。绝对定位他们。给每个自己的一组关键帧相互同步。在这些关键帧中，为每个关键帧定义每个层的不透明度，在关键帧之间混合使用1和0。

请注意容器的颜色会渗透，因此请将图层包裹在具有白色背景的父级中。

http://jsfiddle.net/jSsZn/

Answer 3

我通过申请解决了问题：在归属到标签之前。

链接：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, 0, 51), rgb(153, 0, 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), rgb(0, 111, 145));

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

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

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

Answer 4

你应该检查css砂纸 - 这可以让你实现动画渐变，但它不是一个纯粹的CSS解决方案。 Css砂纸负责渐变的跨浏览器渲染，并且有一段javascript来处理动画。

http://www.useragentman.com/blog/2010/04/05/cross-browser-animated-css-transforms-even-in-ie/

Answer 5

@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来控制哪个位于其上面。

Answer 6

如果您正在寻找文本从纯色到渐变的过渡。只需为文本的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,255,1);

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

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

带渐变的CSS3动画

6 个答案:

CSS：

HTML：

CSS：

CSS：