更改CSS3中的背景颜色

Question

我有以下内容：

#box1 {
    position: absolute;
    width: 400px;
    border: 1px solid black;
    box-shadow:  -3px 8px 34px  #808080;
    border-radius: 20px;
    box-shadow: -8px 5px 5px #888888;
    right: 100px; top:  50px;
    height:  300px;
    background: -webkit-gradient(linear, left top, left bottom, from(#E0FFFF), to(#ADD8E6));
    -webkit-animation-name:myfirst;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    -webkit-animation-play-state:running;
}

 @-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

我的问题是：

from {background:red;}
    to {background:yellow;} 

我怎样才能更改起始颜色（红色）这个（下一行）会喜欢这个颜色的背景：

 -webkit-gradient(linear, left top, left bottom, from(#E0FFFF), to(#ADD8E6)); 

Answer 1

试试这个代码。

注意 ：使用细分时可能会...

<!DOCTYPE HTML>
<html>
<head>
<title>What</title>
<style type="text/css">
#box1 {
    position: absolute;
    width: 400px;
    border: 1px solid black;
    box-shadow:  -3px 8px 34px  #808080;
    border-radius: 20px;
    box-shadow: -8px 5px 5px #888888;
    right: 100px; top:  50px;
    height:  300px;
    background: -webkit-gradient(linear, left top, left bottom, from(#E0FFFF), to(#ADD8E6));
}

#box1 > div
{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background-color: yellow;
    opacity: 0;
    -webkit-animation:myfirst 5s;
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    from { opacity: 0; }
    to { opacity: 1;}
}
</style>
</head>
<body>

<div id="box1"><div></div></div>

</body>
</html>