带渐变的CSS3动画

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渐变尚不支持过渡.这是在规范中,但它还没有工作.

(ps如果你只进行颜色过渡 - 你可能想看一下-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;
}