change the background color in CSS3

I have the following :

#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;}
}

My question is: in those lines

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

how can I change the start color (red) to this (in the next line) will be like this color in the background:

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

Solution

Try this code.

Note : it's possible when you use sub div...

<!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>