css中具有渐变颜色的动画

Question

我有这个CSS3代码：

#box2 {
    position: relative;
    width: 500px;
    border: 1px solid black;
    box-shadow: -3px 8px 34px #808080;
    border-radius: 20px;
    box-shadow: -8px 5px 5px #888888;
    right: 300px;
    top: 113px;
    text-align: justify;
    -webkit-transition: all 1s;
    font-size: large;
    color: Black;
    padding: 10px;
    background: #D0D0D0;
    opacity: 0;
}


@-webkit-keyframes mySecond {
    0% {
        right: 300px;
        top: 13px;
        background: #D0D0D0;
        opacity: 0;
    }

    100% {
        background: #909090;
        right: 300px;
        top: 63px;
        opacity: 1;
    }
}

#littlebox2 {
    top: 053px;
    position: absolute;
    display: inline-block;
}

.littlebox2sentence {
    font-size: large;
    padding-bottom: 15px;
    padding-top: 15px;
    padding-left: 25px;
    padding-right: 10px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9CCEDA), to(#58A8D8));
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-transition: background .25s ease-in-out;
    border-bottom: 2px solid red;
    border-right: 2px solid red;
    border-top: 2px solid red;
    -webkit-transition-property: color, background;
    -webkit-transition-duration: .25s, .25s;
    -webkit-transition-timing-function: linear, ease-in-out;
    color: #164ad7;
}

#bothcontainer2:hover ~ #box2 {
    -webkit-transition: all 0s;
    background: #909090;
    right: 300px;
    top: 63px;
    -webkit-animation: mySecond .75s;
    -webkit-animation-fill-mode: initial;
    opacity: 1;
}

#bothcontainer2:hover .littlebox2sentence {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#B2DFE9), to(#83BEF1));
    color: black;

}

这里有一个真实的例子：http://jsfiddle.net/md966/3/

如何制作具有渐变颜色的动画？例如，如果颜色是蓝色和红色，它就可以正常工作(背景颜色过渡)，但当我将其替换为渐变颜色时，它就不起作用了。我找到了一些教程，但它们对我并没有真正的帮助。

Answer 1

当使用渐变作为背景时，您不需要定义背景色。渐变是背景图像。背景-图像不是一个可以进行动画处理的属性。所以你的方法行不通。