change the background color in CSS3

Question

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));

Possible duplicate: http://stackoverflow.com/questions/5654510/css3-animation-with-gradients — Christian, Nov 30 '12 at 15:49
a gradient is a background-image, not a background-color. How do you want to make a transition between two different kinds of attributes? — Sven Bieder, Nov 30 '12 at 16:00
I mean that this "from(#E0FFFF), to(#ADD8E6)" will be the start color, and yellow will be in the end. Can I do it? — tsnave, Nov 30 '12 at 16:37
do you mean stop the loop. that is end the animation with yellow. — , Nov 30 '12 at 16:41
Yes, and the *start* color will be more than one color like this ----from(#E0FFFF), to(#ADD8E6));----- — tsnave, Nov 30 '12 at 16:43

score 3 · Accepted Answer · 2012-11-30T16:48:02.160

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>

Thanks, I don't understand what you did here (can you explain pleas?) and this code is not working for me... — tsnave, Nov 30 '12 at 16:35

change the background color in CSS3

1 Answers1